mirror of
https://github.com/fspc/workstand.git
synced 2025-11-04 00:45:35 -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.sessions',
|
||||||
'django.contrib.messages',
|
'django.contrib.messages',
|
||||||
'django.contrib.staticfiles',
|
'django.contrib.staticfiles',
|
||||||
|
|
||||||
|
'webpack_loader',
|
||||||
'compressor',
|
'compressor',
|
||||||
|
|
||||||
'registration',
|
'registration',
|
||||||
'core',
|
'core',
|
||||||
]
|
]
|
||||||
@ -120,6 +123,7 @@ STATICFILES_FINDERS = (
|
|||||||
)
|
)
|
||||||
STATICFILES_DIRS = [
|
STATICFILES_DIRS = [
|
||||||
('vendor', os.path.join(BASE_DIR, '../vendor')),
|
('vendor', os.path.join(BASE_DIR, '../vendor')),
|
||||||
|
os.path.join(BASE_DIR, '../assets')
|
||||||
]
|
]
|
||||||
STATIC_ROOT = 'static'
|
STATIC_ROOT = 'static'
|
||||||
STATIC_URL = '/static/'
|
STATIC_URL = '/static/'
|
||||||
@ -129,3 +133,13 @@ AUTH_USER_MODEL = 'registration.Member'
|
|||||||
COMPRESS_PRECOMPILERS = (
|
COMPRESS_PRECOMPILERS = (
|
||||||
('text/x-scss', 'django_libsass.SassCompiler'),
|
('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']
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +1,5 @@
|
|||||||
{% load compress staticfiles %}
|
{% load compress staticfiles %}
|
||||||
<!doctype html>
|
<!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
|
|
||||||
-->
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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/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" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static 'vendor/normalize-css/normalize.css' %}">
|
||||||
{% compress css %}
|
{% compress css %}
|
||||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/screen.scss' %}">
|
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/screen.scss' %}">
|
||||||
{% endcompress %}
|
{% 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": {
|
"dependencies": {
|
||||||
"material-design-lite": "^1.1.3",
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,3 +3,4 @@
|
|||||||
django-debug-toolbar
|
django-debug-toolbar
|
||||||
PyYAML
|
PyYAML
|
||||||
gunicorn==19.4.5
|
gunicorn==19.4.5
|
||||||
|
django-webpack-loader
|
||||||
Loading…
x
Reference in New Issue
Block a user