├── .babelrc
├── .gitignore
├── README.md
├── dev
    ├── js
    │   ├── components
    │   │   ├── Footer.js
    │   │   ├── Header.js
    │   │   └── Layout.js
    │   └── main.js
    └── scss
    │   └── style.scss
├── package.json
├── src
    └── index.html
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](http://i.imgur.com/PVELbIQ.png)
 2 | 
 3 | Boilerplate for React/Sass/webpack build.
 4 | 
 5 | ## Getting Started
 6 | 
 7 | To get started, first install all the necessary dependencies.
 8 | ```
 9 | > npm install
10 | ```
11 | 
12 | Run an initial webpack build
13 | ```
14 | > npm run dev
15 | ```
16 | 
17 | Start the development server (changes will now update live in browser)
18 | ```
19 | > npm run start
20 | ```
21 | 
22 | To view your project, go to: [http://localhost:3000/](http://localhost:3000/)
23 | 
24 | ## Links
25 | 
26 | - [Donate](https://www.patreon.com/thenewboston)
27 | - [thenewboston.com](https://thenewboston.com/)
28 | - [Facebook](https://www.facebook.com/TheNewBoston-464114846956315/)
29 | - [Twitter](https://twitter.com/bucky_roberts)
30 | - [Google+](https://plus.google.com/+BuckyRoberts)
31 | - [reddit](https://www.reddit.com/r/thenewboston/)
32 | 


--------------------------------------------------------------------------------
/dev/js/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default class Footer extends React.Component {
4 |     render() {
5 |         return (<h2>Footer</h2>);
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/dev/js/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default class Header extends React.Component {
4 |     render() {
5 |         return (<h1>Header</h1>);
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/dev/js/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Footer from "./Footer";
 3 | import Header from "./Header";
 4 | require('../../scss/style.scss');
 5 | 
 6 | 
 7 | export default class Layout extends React.Component {
 8 |     render() {
 9 |         return (
10 |             <div>
11 |                 <Header />
12 |                 <Footer />
13 |             </div>
14 |         );
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/dev/js/main.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import Layout from "./components/Layout";
4 | 
5 | ReactDOM.render(<Layout/>, document.getElementById('app'));
6 | 


--------------------------------------------------------------------------------
/dev/scss/style.scss:
--------------------------------------------------------------------------------
1 | $primary: blue;
2 | 
3 | h1 {
4 | 	color: $primary;
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-webpack",
 3 |   "version": "1.0.1",
 4 |   "description": "Boilerplate for React webpack build.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack",
 8 |     "start": "webpack-dev-server"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/buckyroberts/React-Webpack.git"
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "bugs": {
17 |     "url": "https://github.com/buckyroberts/React-Webpack/issues"
18 |   },
19 |   "homepage": "https://github.com/buckyroberts/React-Webpack#readme",
20 |   "dependencies": {
21 |     "babel-core": "^6.10.4",
22 |     "babel-loader": "^6.2.4",
23 |     "babel-preset-es2015": "^6.9.0",
24 |     "babel-preset-react": "^6.5.0",
25 |     "css-loader": "^0.23.1",
26 |     "node-sass": "^3.8.0",
27 |     "react": "^15.1.0",
28 |     "react-dom": "^15.1.0",
29 |     "sass-loader": "^3.2.2",
30 |     "style-loader": "^0.13.1",
31 |     "webpack": "^1.13.1",
32 |     "webpack-dev-server": "^1.14.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>React Webpack</title>
 6 | </head>
 7 | <body>
 8 | 
 9 |     <div id="app"></div>
10 |     <script src="js/bundle.min.js"></script>
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | module.exports = {
 4 | 
 5 |     entry: './dev/js/main.js',
 6 |     devServer: {
 7 |         inline: true,
 8 |         contentBase: './src',
 9 |         port: 3000
10 |     },
11 |     module: {
12 |         loaders : [
13 |             {
14 |                 test: /\.js$/,
15 |                 exclude: /(node_modules)/,
16 |                 loader: 'babel',
17 |                 query: {
18 |                     presets: ['react', 'es2015']
19 |                 }
20 |             },
21 |             {
22 |                 test: /\.scss/,
23 |                 loader: 'style-loader!css-loader!sass-loader'
24 |             }
25 |         ]
26 |     },
27 |     devtool: 'cheap-module-eval-source-map',
28 |     output: {
29 |         path: 'src',
30 |         filename: 'js/bundle.min.js'
31 |     }
32 | };
33 | 


--------------------------------------------------------------------------------