Basic reactjs support.

9 years ago · ad0ad4eac8
10 changed files with 153 additions and 22 deletions
--- a/bikeshop_project/assets/js/index.jsx
+++ b/bikeshop_project/assets/js/index.jsx
@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Autocomplete from 'react-toolbox/lib/autocomplete';
+
+const source = {
+  'ES-es': 'Spain',
+  'TH-th': 'Thailand',
+  'EN-gb': 'England',
+  'EN-en': 'USA'
+};
+
+class AutocompleteTest extends React.Component {
+  state = {
+    countries: ['ES-es', 'TH-th']
+  };
+
+  handleChange = (value) => {
+    this.setState({countries: value});
+  };
+
+  render () {
+    return (
+      <Autocomplete
+        direction="down"
+        selectedPosition="above"
+        label="Choose countries"
+        onChange={this.handleChange}
+        source={source}
+        value={this.state.countries}
+      />
+    );
+  }
+}
+
+class App extends React.Component {
+    render () {
+        return (<AutocompleteTest />)
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
--- a/bikeshop_project/bikeshop/settings/base.py
+++ b/bikeshop_project/bikeshop/settings/base.py
@ -29,7 +29,10 @@ INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+
+    'webpack_loader',
    'compressor',
+
    'registration',
    'core',
 ]
@ -120,6 +123,7 @@ STATICFILES_FINDERS = (
 )
 STATICFILES_DIRS = [
    ('vendor', os.path.join(BASE_DIR, '../vendor')),
+    os.path.join(BASE_DIR, '../assets')
 ]
 STATIC_ROOT = 'static'
 STATIC_URL = '/static/'
@ -129,3 +133,13 @@ AUTH_USER_MODEL = 'registration.Member'
 COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'django_libsass.SassCompiler'),
 )
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'CACHE': False,
+        'BUNDLE_DIR_NAME': 'bundles/', # must end with slash
+        'STATS_FILE': os.path.join(BASE_DIR, '../webpack-stats.json'),
+        'POLL_INTERVAL': 0.1,
+        'IGNORE': ['.+\.hot-update.js', '.+\.map']
+    }
+}
--- a/bikeshop_project/core/templates/base.html
+++ b/bikeshop_project/core/templates/base.html
@ -1,21 +1,5 @@
 {% load compress staticfiles %}
-<!doctype html>
-<!--
-  Material Design Lite
-  Copyright 2015 Google Inc. All rights reserved.
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License
-->
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@ -47,6 +31,7 @@

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/normalize-css/normalize.css' %}">
    {% compress css %}
    <link rel="stylesheet" type="text/x-scss" href="{% static 'scss/screen.scss' %}">
    {% endcompress %}
--- a/bikeshop_project/core/templates/dashboard.html
+++ b/bikeshop_project/core/templates/dashboard.html
@ -1 +1,7 @@
 {% extends 'base.html' %}
+{% load render_bundle from webpack_loader %}
+
+{% block content %}
+    <div id="root"></div>
+    {% render_bundle 'main' %}
+{% endblock %}
--- a/bikeshop_project/package.json
+++ b/bikeshop_project/package.json
@ -0,0 +1,34 @@
+{
+  "name": "workstand",
+  "version": "0.0.1",
+  "description": "A membership management app for the BCBC.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-core": "^6.9.1",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "i": "^0.3.5",
+    "node-sass": "^3.4.2",
+    "normalize.css": "^4.1.1",
+    "postcss-loader": "^0.9.1",
+    "react": "^15.1.0",
+    "react-addons-css-transition-group": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-toolbox": "^0.16.2",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "toolbox-loader": "0.0.3",
+    "webpack": "^1.13.1",
+    "webpack-bundle-tracker": "0.0.93"
+  }
+}
--- a/bikeshop_project/webpack-stats.json
+++ b/bikeshop_project/webpack-stats.json
@ -0,0 +1 @@
+{"status":"done","chunks":{"main":[{"name":"main-68cfa02cc7400e2d6bcc.js","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/main-68cfa02cc7400e2d6bcc.js"},{"name":"react-toolbox.css","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/react-toolbox.css"}]}}
--- a/bikeshop_project/webpack.config.js
+++ b/bikeshop_project/webpack.config.js
@ -0,0 +1,48 @@
+const path = require("path");
+const webpack = require('webpack');
+const BundleTracker = require('webpack-bundle-tracker');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer =  require('autoprefixer');
+
+module.exports = {
+    context: __dirname,
+    devtool: 'inline-source-map',
+    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
+
+    output: {
+        path: path.resolve('./assets/bundles/'),
+        filename: "[name]-[hash].js"
+    },
+
+    plugins: [
+        new BundleTracker({filename: './webpack-stats.json'}),
+        new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
+        new webpack.NoErrorsPlugin()
+    ],
+
+    module: {
+        loaders: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['es2015', 'stage-0', 'react']
+                }
+            },
+            {
+                test: /(\.scss|\.css)$/,
+                loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
+          }
+        ]
+    },
+    resolve: {
+        modulesDirectories: [
+            'node_modules',
+            'bower_components',
+            path.resolve(__dirname, './node_modules')
+        ],
+        extensions: ['', '.js', '.jsx', '.scss']
+    },
+    postcss: [autoprefixer]
+}
--- a/bower.json
+++ b/bower.json
@ -18,6 +18,7 @@
  ],
  "dependencies": {
    "material-design-lite": "^1.1.3",
-    "md-date-time-picker": "https://github.com/puranjayjain/md-date-time-picker.git#master"
+    "md-date-time-picker": "https://github.com/puranjayjain/md-date-time-picker.git#master",
+    "normalize-css": "normalize.css#^4.1.1"
  }
 }
--- a/requirements/development.txt
+++ b/requirements/development.txt
@ -3,3 +3,4 @@
 django-debug-toolbar
 PyYAML
 gunicorn==19.4.5
+django-webpack-loader
			`@ -0,0 +1 @@`
			`{"status":"done","chunks":{"main":[{"name":"main-68cfa02cc7400e2d6bcc.js","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/main-68cfa02cc7400e2d6bcc.js"},{"name":"react-toolbox.css","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/react-toolbox.css"}]}}`