├── index.js ├── README.md ├── components ├── TestOne.jsx ├── TestTwo.jsx ├── MyApp.jsx └── TopBar.jsx ├── routes.jsx ├── webpack.config.js ├── package.json └── .gitignore /index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import routes from './routes.jsx'; 3 | 4 | ReactDOM.render(routes, document.querySelector('#main-container')); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React-Toolbox Boilerplate 2 | ========================= 3 | 4 | Work in progress. 5 | 6 | Use `npm install && npm run dev` and go to http://localhost:8080 -------------------------------------------------------------------------------- /components/TestOne.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class TestOne extends React.Component { 4 | render(){ 5 | return ( 6 |

Hello TestOne

7 | ); 8 | } 9 | } 10 | 11 | export default TestOne; -------------------------------------------------------------------------------- /components/TestTwo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class TestTwo extends React.Component { 4 | render(){ 5 | return ( 6 |

Hello TestTwo

7 | ); 8 | } 9 | } 10 | 11 | export default TestTwo; -------------------------------------------------------------------------------- /components/MyApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {App} from 'react-toolbox'; 3 | import TopBar from './TopBar.jsx'; 4 | 5 | class MyApp extends React.Component { 6 | render(){ 7 | return ( 8 | 9 | 10 |
11 |


12 | {this.props.children} 13 |
14 | 15 | ); 16 | } 17 | } 18 | 19 | export default MyApp; -------------------------------------------------------------------------------- /components/TopBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppBar, Navigation } from 'react-toolbox'; 3 | 4 | const testLinks = [ 5 | {label: "Test One", kind: "raised", icon: "battery-full", href: '#/test1'}, 6 | {label: "Test Two", kind: "raised", icon: "business", href: '#/test2'} 7 | ]; 8 | 9 | class TopBar extends React.Component { 10 | render() { 11 | return ( 12 | 13 | React-Toolbox Boilerplate 14 | 15 | 16 | ); 17 | } 18 | } 19 | 20 | export default TopBar; -------------------------------------------------------------------------------- /routes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Router, Route} from 'react-router'; 3 | import createHashHistory from 'history/lib/createHashHistory'; 4 | 5 | import MyApp from './components/MyApp.jsx'; 6 | import TestOne from './components/TestOne.jsx'; 7 | import TestTwo from './components/TestTwo.jsx'; 8 | 9 | const history = createHashHistory(); 10 | 11 | const routes = ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | export default routes; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | entry: [ 5 | 'webpack-dev-server/client?http://0.0.0.0:8080', 6 | 'webpack/hot/only-dev-server', 7 | './index.js' 8 | ], 9 | output: { 10 | path: path.join(__dirname, 'build'), 11 | filename: 'app.js' 12 | }, 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.jsx?$/, 17 | exclude: /(node_modules|bower_components)/, 18 | loaders: ['react-hot', 'babel'] 19 | }, 20 | { 21 | test: /(\.scss|\.css)$/, 22 | loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass' 23 | } 24 | ] 25 | }, 26 | resolve: { 27 | extensions: ['', '.js', '.jsx', '.json', '.scss'], 28 | }, 29 | devtool: 'source-map', 30 | devServer: { 31 | noInfo: true, 32 | hot: true, 33 | inline: true, 34 | contentBase: "./build", 35 | historyApiFallback: true 36 | }, 37 | plugins: [] 38 | }; 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-toolbox-boilerplate", 3 | "version": "1.0.0", 4 | "description": "React-Toolbox boilerplate", 5 | "author": "Nazari Gonzalez", 6 | "scripts": { 7 | "build": "./node_modules/webpack/bin/webpack.js --colors --profile --progress -p", 8 | "dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --colors --profile --progress --hot" 9 | }, 10 | "engines": { 11 | "node": "4.2.1" 12 | }, 13 | "license": "MIT", 14 | "devDependencies": { 15 | "babel": "^6.0.15", 16 | "babel-core": "^5.5.8", 17 | "babel-loader": "^5.1.4", 18 | "css-loader": "^0.21.0", 19 | "file-loader": "^0.8.4", 20 | "history": "^1.13.0", 21 | "node-sass": "^3.4.1", 22 | "normalize.css": "^3.0.3", 23 | "postcss-loader": "^0.7.0", 24 | "react": "^0.14.2", 25 | "react-addons-css-transition-group": "^0.14.2", 26 | "react-addons-test-utils": "^0.14.2", 27 | "react-dom": "^0.14.2", 28 | "react-hot-loader": "^1.2.7", 29 | "react-router": "^1.0.0-rc4", 30 | "react-toolbox": "^0.11.2", 31 | "react-transform-catch-errors": "^1.0.0", 32 | "react-transform-hmr": "^1.0.1", 33 | "redbox-react": "^1.1.1", 34 | "sass-loader": "^3.1.1", 35 | "style-loader": "^0.13.0", 36 | "webpack": "^1.12.2", 37 | "webpack-dev-server": "^1.12.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio 4 | 5 | *.iml 6 | 7 | ## Directory-based project format: 8 | .idea/ 9 | # if you remove the above rule, at least ignore the following: 10 | 11 | # User-specific stuff: 12 | # .idea/workspace.xml 13 | # .idea/tasks.xml 14 | # .idea/dictionaries 15 | 16 | # Sensitive or high-churn files: 17 | # .idea/dataSources.ids 18 | # .idea/dataSources.xml 19 | # .idea/sqlDataSources.xml 20 | # .idea/dynamic.xml 21 | # .idea/uiDesigner.xml 22 | 23 | # Gradle: 24 | # .idea/gradle.xml 25 | # .idea/libraries 26 | 27 | # Mongo Explorer plugin: 28 | # .idea/mongoSettings.xml 29 | 30 | ## File-based project format: 31 | *.ipr 32 | *.iws 33 | 34 | ## Plugin-specific files: 35 | 36 | # IntelliJ 37 | /out/ 38 | 39 | # mpeltonen/sbt-idea plugin 40 | .idea_modules/ 41 | 42 | # JIRA plugin 43 | atlassian-ide-plugin.xml 44 | 45 | # Crashlytics plugin (for Android Studio and IntelliJ) 46 | com_crashlytics_export_strings.xml 47 | crashlytics.properties 48 | crashlytics-build.properties 49 | ### Node template 50 | # Logs 51 | logs 52 | *.log 53 | npm-debug.log* 54 | 55 | # Runtime data 56 | pids 57 | *.pid 58 | *.seed 59 | 60 | # Directory for instrumented libs generated by jscoverage/JSCover 61 | lib-cov 62 | 63 | # Coverage directory used by tools like istanbul 64 | coverage 65 | 66 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 67 | .grunt 68 | 69 | # node-waf configuration 70 | .lock-wscript 71 | 72 | # Compiled binary addons (http://nodejs.org/api/addons.html) 73 | build/Release 74 | 75 | # Dependency directory 76 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 77 | node_modules 78 | 79 | --------------------------------------------------------------------------------