Add React skeleton
Redux was intentionally not added at this stage, not because we shouldn't use it, but because there's not much setup to do until we have some real-world use cases.
This commit is contained in:
John Karahalis
Родитель
470e7a1c34
Коммит
0478791317
2
.babelrc
2
.babelrc
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"presets": ["react", "es2015", "stage-2"]
|
||||
"presets": ["react", "es2015"]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import router from './router';
|
||||
|
||||
ReactDOM.render(router, document.getElementById('root'));
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Home = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<h1>Distribution Viewer</h1>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default Home;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function(props) {
|
||||
return (
|
||||
<div className="global-wrapper">
|
||||
<header className="primary-header"></header>
|
||||
<main>
|
||||
{props.children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import { Router, Route, browserHistory } from 'react-router';
|
||||
|
||||
// Layouts
|
||||
import MainLayout from './components/layouts/main-layout';
|
||||
|
||||
// Pages
|
||||
import Home from './components/home';
|
||||
|
||||
export default (
|
||||
<Router history={browserHistory}>
|
||||
<Route component={MainLayout}>
|
||||
<Route path="/" component={Home} />
|
||||
</Route>
|
||||
</Router>
|
||||
);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% load staticfiles %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Distribution Viewer</title>
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/bundle.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="{% static 'js/bundle.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -34,6 +34,7 @@ INSTALLED_APPS = [
|
|||
'django.contrib.staticfiles',
|
||||
'rest_framework',
|
||||
'distributionviewer.api',
|
||||
'distributionviewer.core',
|
||||
]
|
||||
|
||||
MIDDLEWARE_CLASSES = [
|
||||
|
|
@ -62,7 +63,6 @@ TEMPLATES = [
|
|||
'django.template.context_processors.static',
|
||||
'django.template.context_processors.tz',
|
||||
'django.contrib.messages.context_processors.messages',
|
||||
'distributionviewer.studies.context_processors.google_auth_key',
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ var concat = require('gulp-concat');
|
|||
require('es6-promise').polyfill();
|
||||
|
||||
var ROOT = './';
|
||||
var JS = path.resolve(ROOT, 'distributionviewer/core/static/js');
|
||||
var CSS = path.resolve(ROOT, 'distributionviewer/core/static/css');
|
||||
|
||||
// Webpack
|
||||
gulp.task('webpack', function() {
|
||||
return gulp.src('./distributionviewer/core/static/js/app/app.js')
|
||||
.pipe(webpack(require('./distributionviewer/core/static/js/webpack.config.js')))
|
||||
.pipe(webpack(require('./webpack.config.js')))
|
||||
.pipe(gulp.dest('./'));
|
||||
});
|
||||
|
||||
|
|
@ -31,6 +32,7 @@ gulp.task('css', function() {
|
|||
});
|
||||
|
||||
gulp.task('watch', ['build'], function() {
|
||||
gulp.watch([path.resolve(JS, '**/*.js'), '!' + path.resolve(JS, 'bundle.js')], ['webpack']);
|
||||
gulp.watch(path.resolve(CSS, '**/*.styl'), ['css']);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,10 @@
|
|||
"postinstall": "gulp build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.9.1",
|
||||
"babel-core": "^6.7.7",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"babel-preset-react": "^6.5.0",
|
||||
"babel-preset-stage-2": "^6.5.0",
|
||||
"browser-sync": "^2.12.3",
|
||||
"es6-promise": "^3.1.2",
|
||||
"gulp": "^3.9.1",
|
||||
|
|
@ -20,14 +18,9 @@
|
|||
"nib": "^1.1.0",
|
||||
"react": "^15.0.1",
|
||||
"react-dom": "^15.0.1",
|
||||
"react-redux": "^4.4.5",
|
||||
"react-router": "^2.0.0",
|
||||
"redux": "^3.4.0",
|
||||
"webpack-stream": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.7.7",
|
||||
"foreman": "^1.4.1",
|
||||
"stylus": "^0.54.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './distributionviewer/core/static/js/app/app.js',
|
||||
output: {
|
||||
filename: './distributionviewer/core/static/js/bundle.js',
|
||||
sourceMapFilename: './distributionviewer/core/static/js/bundle.map'
|
||||
},
|
||||
devtool: '#source-map',
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Загрузка…
Ссылка в новой задаче