mirror of
https://github.com/fspc/workstand.git
synced 2025-02-23 01:13:22 -05:00
Basic reactjs support.
This commit is contained in:
Drew Larson
parent
af1130de04
commit
ad0ad4eac8
41
bikeshop_project/assets/js/index.jsx
Normal file
41
bikeshop_project/assets/js/index.jsx
Normal file
@ -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'));
|
||||
@ -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/'
|
||||
@ -128,4 +132,14 @@ 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']
|
||||
}
|
||||
}
|
||||
@ -53,4 +53,4 @@ INSTALLED_APPS += [
|
||||
# Don't worry about IP addresses, just show the toolbar.
|
||||
DEBUG_TOOLBAR_CONFIG = {
|
||||
'SHOW_TOOLBAR_CALLBACK': lambda *args: True
|
||||
}
|
||||
}
|
||||
@ -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&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 %}
|
||||
|
||||
@ -1 +1,7 @@
|
||||
{% extends 'base.html' %}
|
||||
{% extends 'base.html' %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
{% block content %}
|
||||
<div id="root"></div>
|
||||
{% render_bundle 'main' %}
|
||||
{% endblock %}
|
||||
34
bikeshop_project/package.json
Normal file
34
bikeshop_project/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
1
bikeshop_project/webpack-stats.json
Normal file
1
bikeshop_project/webpack-stats.json
Normal file
@ -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"}]}}
|
||||
48
bikeshop_project/webpack.config.js
Normal file
48
bikeshop_project/webpack.config.js
Normal file
@ -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]
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
-r testing.txt
|
||||
django-debug-toolbar
|
||||
PyYAML
|
||||
gunicorn==19.4.5
|
||||
gunicorn==19.4.5
|
||||
django-webpack-loader
|
||||
Loading…
x
Reference in New Issue
Block a user