├── .gitignore
├── README.md
├── app
    ├── App.js
    └── index.html
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | _NOTE: This is super not maintained anymore. If you are interested in getting started with React I recommend using something like [Create-react-app](https://github.com/facebookincubator/create-react-app)_
  2 | # React Starter
  3 | ### Table of Contents
  4 | - [Getting Started](https://github.com/eanplatter/react-starter#getting-started)
  5 | - [Webpack](https://github.com/eanplatter/react-starter#webpack-webpackconfigjs)
  6 | - [NPM](https://github.com/eanplatter/react-starter#npm-scripts-packagejson)
  7 | - [HTML](https://github.com/eanplatter/react-starter#index-appindexhtml)
  8 | - [React](https://github.com/eanplatter/react-starter#reactappappjs)
  9 | 
 10 | ## Getting Started
 11 | 1. Clone the repo: `git clone git@github.com:eanplatter/react-starter.git myNewApp`
 12 | 2. `npm install`
 13 | 3. `npm start`
 14 | 4. Navigate to `http://localhost:8080/`
 15 | 
 16 | ## File Information
 17 | 
 18 | ### Webpack (webpack.config.js)
 19 | >_Note: some of the code describing the webpack config file is out of date._
 20 | 
 21 | [webpack.config.js](https://github.com/eanplatter/react-starter/blob/master/webpack.config.js) is where the webpack commands understand what to do. It tells webpack where to find application code, and what to do with it.
 22 | 
 23 | Let's take a deeper look at the file:
 24 | 
 25 | **_webpack.config.js_**
 26 | ``` javascript
 27 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 28 | ```
 29 | This is a third party module that allows us to generate our `index.html` file along with our react bundle file. It's not 100% necessary, but it's pretty handy.
 30 | ``` javascript
 31 | 
 32 | module.exports = {
 33 |   entry: './app/App.js',
 34 | ```
 35 | This is the entry point of the application. Webpack will start there, and then grab any code this file requires.
 36 | ``` javascript
 37 |   output: {
 38 |     path: 'dist',
 39 |     filename: 'index_bundle.js',
 40 |   },
 41 | ```
 42 | Once it's grabbed the code, it uses this `output` object to determine where to put the bundle. The path tells it what folder to place the code, and the filename is the name of the bundled file. This means once webpack finishes bundling, it is going to create a file in the dist folder named `index_bundle.js`. This file is usually pretty big, and unreadable.
 43 | ``` javascript
 44 |   module: {
 45 |     loaders: [
 46 |       {
 47 |         test: /\.js$/,
 48 |         loaders: ['babel?stage=0'],
 49 |         include: __dirname + '/app'
 50 |       },
 51 |     ]
 52 |   },
 53 | ```
 54 | Loaders tell webpack what kind of code we'll be writing. If we're writing `ES6`, `ES7`, `React`, or whatever crazy stuff. Webpack goes through and converts files with the type of `.js` loads it through the [Babel](http://babeljs.io/) loader at `stage=0` (`ES7` stuff), and turns it into regular old `ES5`.
 55 | 
 56 | In this instance we're using the `include` property to tell the loader to only load `.js` files from the `app/` folder.
 57 | 
 58 | ``` javascript
 59 | var HTMLWebpackPlugin = new HtmlWebpackPlugin({
 60 |   template: __dirname + '/app/index.html',
 61 |   hash: true,
 62 |   filename: 'index.html',
 63 |   inject: 'body'
 64 | });
 65 | ```
 66 | This is where we use the `HTMLWebpackPlugin` to generate an `index.html` file. Normally one would just keep an `index.html` file in the `dist` directory, but I like to generate it so that everything in the `dist` is 100% generated code.
 67 | 
 68 | ``` javascript
 69 | var HotReloader = new webpack.HotModuleReplacementPlugin();
 70 | ```
 71 | We also need to instantiate an instance of webpack's `HotModuleReplacementPlugin` for live reloading.
 72 | 
 73 | We then add both the `HotReloader` and `HTMLWebpackPlugin` to the `plugins` section of the module.
 74 | 
 75 | ``` javaScript
 76 |  plugins: [HTMLWebpackPlugin, HotReloader]
 77 | ```
 78 | 
 79 | <hr>
 80 | 
 81 | ### NPM scripts (package.json)
 82 | [package.json](https://github.com/eanplatter/react-starter/blob/master/package.json) is where npm modules are listed as dependencies (duh), but also where the webpack start script lives. Rather than using something like [Gulp](http://gulpjs.com/) we're gonna keep things simple and use npm scripts.
 83 | 
 84 | The main thing to note is the scripts property; when you run `npm start` it runs the prestart, which runs webpack. Once webpack has finished building all of the code, it runs `webpack-dev-server` (serving up the files to port 8080) with the `dist` directory as the `content-base`, otherwise `webpack-dev-server` would just look for the `index.html` in the root of the project:
 85 | ``` javascript
 86 |   "scripts": {
 87 |     "prestart": "webpack",
 88 |     "start": "webpack-dev-server --content-base dist/"
 89 |   },
 90 | ```
 91 | 
 92 | <hr>
 93 | 
 94 | ### Index (app/index.html)
 95 | [index.html](https://github.com/eanplatter/react-starter/blob/master/app/index.html) is the application's main HTML file. You can use it for loading in CDNs, etc.
 96 | 
 97 | Also, it's where you'll hook React into the mix. Notice in the file we have a `div` with the `id` of `root`:
 98 | ``` html
 99 | <div id='root'></div>
100 | ```
101 | This is where we tell our bundle file to render all of it's code.
102 | 
103 | <hr>
104 | 
105 | ### React(app/App.js)
106 | [App.js](https://github.com/eanplatter/react-starter/blob/master/app/App.js) is the main file of the application. It's where the React code is injected into the `index.html`.
107 | 
108 | Let's look at the file:
109 | 
110 | **_webpack.config.js_**
111 | ``` javascript
112 | import React, {Component} from 'react';
113 | import {render} from 'react-dom';
114 | ```
115 | These are `ES6` imports and destructurings. Essentially we're getting React and it's Component property from `react`, and a `render` property from something called `react-dom`.
116 | 
117 | ``` javascript
118 | class App extends Component {
119 |   render() {
120 |     return (
121 |       <div>
122 |         <h1>
123 |           Welcome to the react starter.
124 |         </h1>
125 |       </div>
126 |     );
127 |   }
128 | }
129 | ```
130 | This bit is our actual UI. We're using an `ES6` class, but we could also do the same thing with `React.createClass()`. There's plenty of debate on the two, but what's important is that they both have `render` methods which return something called `JSX`. `JSX` is a lot like `HTML` but with a different flavor.
131 | 
132 | ``` javascript
133 | render(<App />, document.getElementById('root'));
134 | ```
135 | Lastly, this piece is where we use that `render` property found in the `react-dom` library. In our case, this is telling Webpack where to put the `<App />` component we made (when we said `class App extends Component` we were creating a react component that could then be used like an `HTML` element: `<App />`). We're telling react to render our `<App />` inside the element with the ID root.
136 | 
137 | And that's it!
138 | 


--------------------------------------------------------------------------------
/app/App.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {render} from 'react-dom';
 3 | 
 4 | class App extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>
 9 |           Welcome to the react starter.
10 |         </h1>
11 |       </div>
12 |     );
13 |   }
14 | }
15 | 
16 | render(<App />, document.getElementById('root'));
17 | 


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Starter App</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="root"></div>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sample",
 3 |   "version": "0.1.0",
 4 |   "description": "boilerplate app",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "prestart": "webpack",
 8 |     "start": "webpack-dev-server"
 9 |   },
10 |   "author": "Ean Platter <eanplatter@gmail.com> (eanplatter.github.io)",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "react": "^0.14.0",
14 |     "react-dom": "^0.14.2",
15 |     "babel-core": "^6.2.1",
16 |     "babel-loader": "^6.2.0",
17 |     "babel-preset-es2015": "^6.1.18",
18 |     "babel-preset-react": "^6.1.18",
19 |     "babel-preset-stage-0": "^6.1.18",
20 |     "history": "^1.13.0",
21 |     "html-webpack-plugin": "^1.6.2",
22 |     "react-hot-loader": "^1.3.0",
23 |     "webpack": "^1.12.8",
24 |     "webpack-dev-server": "^1.12.1"
25 |   },
26 |   "babel": {
27 |     "presets": [
28 |       "es2015",
29 |       "react",
30 |       "stage-0"
31 |     ]
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | 
 4 | var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
 5 |   template: __dirname + '/app/index.html',
 6 |   hash: true,
 7 |   filename: 'index.html',
 8 |   inject: 'body'
 9 | });
10 | var HotReloader = new webpack.HotModuleReplacementPlugin();
11 | 
12 | module.exports = {
13 |   devtool: 'source-map',
14 |   entry: [
15 |     'webpack-dev-server/client?http://localhost:8080',
16 |     'webpack/hot/dev-server',
17 |     './app/App.js'
18 |   ],
19 |   output: {
20 |     path: 'dist',
21 |     filename: 'index_bundle.js',
22 |   },
23 |   module: {
24 |     loaders: [
25 |       {
26 |         test: /\.js$/,
27 |         loader: 'react-hot!babel',
28 |         include: __dirname + '/app'
29 |       },
30 |     ]
31 |   },
32 |   plugins: [HTMLWebpackPluginConfig, HotReloader],
33 |   devServer: {
34 |     contentBase: __dirname + '/dist',
35 |     hot: true,
36 |   }
37 | };
38 | 


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