├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── Routes.jsx ├── components │ ├── About.jsx │ ├── App.css │ ├── App.jsx │ ├── Guest.jsx │ ├── GuestEntry.jsx │ ├── Guests.jsx │ ├── NavigationBar.css │ ├── NavigationBar.jsx │ └── NavigationItem.jsx ├── index.html ├── index.jsx ├── models │ └── GuestModel.js └── stores │ └── GuestStore.js ├── webpack.config.js ├── webpack.loaders.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "presets": [ 4 | "react", 5 | "es2015", 6 | "stage-1" 7 | ], 8 | "plugins": ["transform-decorators-legacy"] 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ali Al Dallal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Old and outdated, don't use. Archived and not updated. 2 | # react-routing-mobx-bootstrap-boilerplate 3 | 4 | Simple React Webpack Babel Starter Kit 5 | 6 | Thin as possible boilerplate with, built with [webpack](https://webpack.github.io/) and includes [react](https://facebook.github.io/react/), [react router](https://github.com/reactjs/react-router), [mobx](https://github.com/mobxjs/mobx), [react-css-modules](https://github.com/gajus/react-css-modules) and [bootstrap-css](https://github.com/StevenIseki/bootstrap-css). 7 | 8 | ### To run 9 | 10 | Clone it 11 | ``` 12 | > $ git clone git@github.com:tranqy/react-routing-mobx-bootstrap-boilerplate.git 13 | ``` 14 | 15 | Install deps 16 | 17 | ``` 18 | > $ npm install 19 | ``` 20 | 21 | Run it 22 | 23 | ``` 24 | > $ npm run dev 25 | ``` 26 | 27 | Then Open the web browser to `http://localhost:8080/` 28 | 29 | Or build it 30 | 31 | ``` 32 | > $ npm run build 33 | ``` 34 | 35 | Original fork from (alicoding)[https://github.com/alicoding/react-webpack-babel.git] Thanks! 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-routing-mobx-bootstrap-boilerplate", 3 | "version": "0.0.1", 4 | "description": "Webpack-react-router-mobx-bootstrap-css-modules", 5 | "main": "''", 6 | "scripts": { 7 | "build": "NODE_ENV=production webpack -p --config webpack.production.config.js --progress --profile --colors", 8 | "dev": "webpack-dev-server --progress --profile --colors --hot" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/tranqy/react-routing-mobx-bootstrap-boilerplate" 13 | }, 14 | "keywords": [ 15 | "React", 16 | "Webpack", 17 | "Babel", 18 | "Starter", 19 | "template" 20 | ], 21 | "author": "Aaron Junod", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/tranqy/react-routing-mobx-bootstrap-boilerplate" 25 | }, 26 | "homepage": "https://github.com/tranqy/react-routing-mobx-bootstrap-boilerplate#readme", 27 | "dependencies": { 28 | "mobx": "^2.3.5", 29 | "mobx-react": "^3.5.0", 30 | "mobx-react-devtools": "^4.2.1", 31 | "react": "15.0.1", 32 | "react-dom": "15.0.1", 33 | "react-router": "^2.5.2" 34 | }, 35 | "devDependencies": { 36 | "babel-core": "6.7.7", 37 | "babel-loader": "6.2.4", 38 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 39 | "babel-preset-es2015": "6.6.0", 40 | "babel-preset-react": "6.5.0", 41 | "babel-preset-stage-1": "^6.5.0", 42 | "babel-preset-stage-2": "^6.11.0", 43 | "bootstrap-css": "^3.0.0", 44 | "copy-webpack-plugin": "^3.0.1", 45 | "css-loader": "0.23.1", 46 | "extract-text-webpack-plugin": "^1.0.1", 47 | "file-loader": "0.8.5", 48 | "json-loader": "^0.5.4", 49 | "json5": "^0.5.0", 50 | "json5-loader": "^0.6.0", 51 | "jsx-loader": "^0.13.2", 52 | "node-libs-browser": "1.0.0", 53 | "react-css-modules": "^3.7.7", 54 | "react-hot-loader": "1.3.0", 55 | "style-loader": "0.13.1", 56 | "url-loader": "0.5.7", 57 | "webpack": "1.13.0", 58 | "webpack-dev-server": "1.14.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/Routes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Route, IndexRoute} from 'react-router' 3 | 4 | import App from './components/App' 5 | import About from './components/About' 6 | import Guests from './components/Guests' 7 | 8 | export default(store) => { 9 | return ( 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/components/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class About extends React.Component { 4 | render() { 5 | return ( 6 |
webpack + babel + react + router + mobx + css-modules + bootstrap
7 | ) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | composes: container from "bootstrap-css/lib/grid.css"; 3 | } 4 | 5 | .appHeading { 6 | composes: jumbotron from "bootstrap-css/lib/jumbotron.css" 7 | } 8 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import CSSModules from 'react-css-modules' 2 | import {container, jumbotron, buttons} from 'bootstrap-css' 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | import DevTool from 'mobx-react-devtools' 6 | import {observer} from 'mobx-react' 7 | 8 | import About from './About' 9 | import NavigationBar from './NavigationBar' 10 | 11 | import styles from './App.css' 12 | Object.assign(styles, jumbotron, container, buttons) 13 | 14 | @observer 15 | class App extends React.Component { 16 | render() { 17 | const {guestStore} = this.props.route 18 | return ( 19 |
20 | 21 | 22 |
23 |

An App

24 |

You have a total of {guestStore.guestCount} guests.

25 | {this.props.children} 26 |
27 | 28 |
29 | ); 30 | } 31 | } 32 | 33 | export default CSSModules(App, styles) 34 | -------------------------------------------------------------------------------- /src/components/Guest.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {observer} from 'mobx-react'; 3 | 4 | 5 | @observer 6 | export default class Guest extends React.Component { 7 | render() { 8 | const {guest} = this.props 9 | return ( 10 |
{guest.guest}
11 | ) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/GuestEntry.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import {observer} from 'mobx-react'; 4 | 5 | const ENTER_KEY = 13; 6 | 7 | @observer 8 | export default class GuestEntry extends React.Component { 9 | 10 | 11 | handleKeyDown = (event) => { 12 | if (event.keyCode !== ENTER_KEY) { 13 | return 14 | } 15 | 16 | event.preventDefault() 17 | 18 | const input = ReactDOM.findDOMNode(this.refs.newGuest) 19 | const val = input.value.trim() 20 | 21 | if (val) { 22 | this.props.guestStore.addGuest(val) 23 | input.value = '' 24 | } 25 | } 26 | 27 | render() { 28 | return ( 29 | 35 | ) 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/Guests.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {observer} from 'mobx-react'; 3 | import Guest from './Guest' 4 | import GuestEntry from './GuestEntry' 5 | 6 | @observer 7 | export default class Guests extends React.Component { 8 | 9 | render() { 10 | const {guestStore} = this.props.route 11 | 12 | return ( 13 |
14 |
The Guests :
15 | {guestStore.guests.map((guest) => ( 16 | 17 | ) 18 | )} 19 | 20 |
21 | ) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/NavigationBar.css: -------------------------------------------------------------------------------- 1 | .headernav { 2 | composes: navbar navbar-default navbar-fixed-top from "bootstrap-css/lib/navbar.css"; 3 | } 4 | 5 | .brand { 6 | composes: navbar-brand from "bootstrap-css/lib/navbar.css"; 7 | padding-left: 40px; 8 | } 9 | 10 | .header { 11 | composes: navbar-header from "bootstrap-css/lib/navbar.css"; 12 | } 13 | 14 | .menu_list { 15 | composes: navbar-collapse collapse from "bootstrap-css/lib/navbar.css"; 16 | } 17 | 18 | .nav_list { 19 | composes: nav from "bootstrap-css/lib/navs.css"; 20 | composes: navbar-nav from "bootstrap-css/lib/navbar.css"; 21 | } 22 | 23 | .container { 24 | composes: container from "bootstrap-css/lib/grid.css"; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/NavigationBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CSSModules from 'react-css-modules' 3 | 4 | import NavItem from './NavigationItem' 5 | import styles from './NavigationBar.css' 6 | 7 | class NavigationBar extends React.Component { 8 | render() { 9 | return ( 10 | 23 | ) 24 | } 25 | } 26 | 27 | export default CSSModules(NavigationBar, styles, {allowMultiple: true}) 28 | -------------------------------------------------------------------------------- /src/components/NavigationItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Link, IndexLink, withRouter } from 'react-router' 3 | 4 | import {navbar} from 'bootstrap-css' 5 | 6 | class NavItem extends Component { 7 | render () { 8 | const { router } = this.props 9 | const { index, to, children, ...props } = this.props 10 | 11 | const LinkComponent = index ? IndexLink : Link 12 | 13 | return ( 14 |
  • 15 | {children} 16 |
    • 17 | ) 18 | } 19 | } 20 | 21 | NavItem = withRouter(NavItem) 22 | 23 | export default NavItem 24 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | boilerplate 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import { Router, hashHistory } from 'react-router' 4 | 5 | import routes from './Routes' 6 | import GuestStore from './stores/GuestStore' 7 | 8 | const initialState = window.initialState || { 9 | guests:[] 10 | } 11 | var store = GuestStore.fromJS(initialState.guests) 12 | 13 | 14 | ReactDOM.render(( 15 | 16 | 17 | ), document.querySelector("#root")) 18 | -------------------------------------------------------------------------------- /src/models/GuestModel.js: -------------------------------------------------------------------------------- 1 | import {observable} from 'mobx' 2 | 3 | export default class GuestModel { 4 | store 5 | @observable guest 6 | 7 | constructor(store, guest) { 8 | this.store = store 9 | this.guest = guest 10 | } 11 | 12 | destroy() { 13 | this.store.guests.remove(this) 14 | } 15 | 16 | setGuest(guest) { 17 | this.guest = guest 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /src/stores/GuestStore.js: -------------------------------------------------------------------------------- 1 | import {observable, computed} from 'mobx' 2 | import GuestModel from '../models/GuestModel' 3 | 4 | 5 | export default class GuestStore { 6 | @observable guests = []; 7 | 8 | @computed get guestCount() { 9 | return this.guests.length; 10 | } 11 | 12 | addGuest (guest) { 13 | this.guests.push(new GuestModel(this, guest)); 14 | } 15 | 16 | toJS() { 17 | return this.guests.map(guest => guest.toJS()); 18 | } 19 | 20 | static fromJS(array) { 21 | const store = new GuestStore(); 22 | store.guests = array.map(item => GuestModel.fromJS(guestStore, item)); 23 | return store; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | var loaders = require('./webpack.loaders'); 4 | var CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 | 7 | 8 | module.exports = { 9 | entry: [ 10 | 'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port 11 | 'webpack/hot/only-dev-server', 12 | './src/index.jsx' // Your appʼs entry point 13 | ], 14 | devtool: process.env.WEBPACK_DEVTOOL || 'source-map', 15 | output: { 16 | path: path.join(__dirname, 'public'), 17 | filename: 'bundle.js' 18 | }, 19 | resolve: { 20 | extensions: ['', '.js', '.jsx'] 21 | }, 22 | module: { 23 | loaders: loaders.concat([{ 24 | test: /\.css$/, 25 | loaders: [ 26 | 'style?sourceMap', 27 | 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 28 | ] 29 | }]) 30 | }, 31 | devServer: { 32 | contentBase: "./public", 33 | noInfo: true, // --no-info option 34 | hot: true, 35 | inline: true 36 | }, 37 | plugins: [ 38 | new webpack.NoErrorsPlugin(), 39 | new CopyWebpackPlugin([{ 40 | from: './src/index.html' 41 | }]) 42 | ] 43 | }; 44 | -------------------------------------------------------------------------------- /webpack.loaders.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | test: /\.jsx?$/, 4 | exclude: /(node_modules|bower_components)/, 5 | loaders: ['react-hot', 'babel'] 6 | }, 7 | { 8 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 9 | loader: "file" 10 | }, 11 | { 12 | test: /\.(woff|woff2)$/, 13 | loader: "url?prefix=font/&limit=5000" 14 | }, 15 | { 16 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 17 | loader: "url?limit=10000&mimetype=application/octet-stream" 18 | }, 19 | { 20 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 21 | loader: "url?limit=10000&mimetype=image/svg+xml" 22 | }, 23 | { 24 | test: /\.gif/, 25 | loader: "url-loader?limit=10000&mimetype=image/gif" 26 | }, 27 | { 28 | test: /\.jpg/, 29 | loader: "url-loader?limit=10000&mimetype=image/jpg" 30 | }, 31 | { 32 | test: /\.png/, 33 | loader: "url-loader?limit=10000&mimetype=image/png" 34 | } 35 | ]; 36 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | var loaders = require('./webpack.loaders'); 4 | var CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: [ 8 | './src/index.jsx' // Your appʼs entry point 9 | ], 10 | output: { 11 | path: path.join(__dirname, 'public'), 12 | filename: 'bundle.js' 13 | }, 14 | resolve: { 15 | extensions: ['', '.js', '.jsx'] 16 | }, 17 | module: { 18 | loaders: loaders.concat([{ 19 | test: /\.css$/, 20 | loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 21 | }]) 22 | }, 23 | plugins: [ 24 | new CopyWebpackPlugin([{ 25 | from: './index.html' 26 | }]), 27 | ] 28 | }; 29 | --------------------------------------------------------------------------------