├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── server.js
├── src
    ├── Counter.js
    └── main.js
├── webpack.config.js
└── www
    └── index.html


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | www/bundle.js
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Minimal React Starter
 2 | ---
 3 | 
 4 | A starter project with [React](https://facebook.github.io/react/), [Babel](http://babeljs.io/), and [Webpack](http://webpack.github.io/).
 5 | 
 6 | This starter is as minimal as possible while still including Babel and Webpack.
 7 | 
 8 | 
 9 | Create Project
10 | ---
11 | ```
12 | git clone git@github.com:ahfarmer/minimal-react-starter.git
13 | ```
14 | 
15 | 
16 | 
17 | Setup
18 | ---
19 | 
20 | ```
21 | npm install
22 | ```
23 | 
24 | 
25 | 
26 | Usage
27 | ---
28 | 
29 | 1. `node server.js`
30 | 
31 | 2. Open [http://localhost:3000/](http://localhost:3000/).
32 | 
33 | 
34 | 
35 | Build it from Scratch
36 | ---
37 | Starter projects can be difficult for beginners to use because of all the moving pieces. To help you understand this starter project, there is a [7-step walkthrough](http://andrewhfarmer.com/build-your-own-starter/) showing how to create it from scratch.
38 | 
39 | 
40 | 
41 | Why Minimal?
42 | ---
43 | The primary purpose of this project is **learning.**
44 | 
45 | For **learning**, a minimal starter project is best. Too many dependencies can cause confusion for a beginner. The process of selecting and adding what you need to a minimal project can be a good way to learn.
46 | 
47 | 
48 | 
49 | Why not more Minimal?
50 | ---
51 | Babel and Webpack are the two tools that I view as completely essential in a React project.
52 | 
53 | There are no other tools that I have used consistently in every single React project that I have built, no matter how large or how small.
54 | 
55 | **Babel:** Even if you are just writing a quick test, you will likely want to use JSX in your components rather than writing out `React.createElement` over and over.
56 | 
57 | **Webpack:** Webpack serves as both the web server and the JavaScript bundler. The only alternative to using a bundler would be to include a `<script>` tag for each of your `.js` files, and that gets messy very quickly, even in a simple project.
58 | 
59 | 
60 | 
61 | More Details
62 | ---
63 | 
64 | * No CSS. For experiments or tests, put your styles in `index.html` in a `<style>` tag. For real projects, pick from [these style tools](http://andrewhfarmer.com/how-to-style-react/).
65 | * No Flux. If you need it - try [Redux](https://github.com/reactjs/redux) or [MobX](https://github.com/mobxjs/mobx)!
66 | * Webpack is run with the `express` and `webpack-dev-middleware`.
67 | * The 'content base' is set to `www`. Any files in that directory will be served by express.
68 | 
69 | 
70 | 
71 | HMR
72 | ---
73 | 
74 | HMR is not supported in the master branch for simplicity. If you would like HMR support, you can [see the changes that add HMR support](https://github.com/ahfarmer/minimal-react-starter/compare/hmr) or you can directly clone the HMR branch:
75 | 
76 | ```
77 | git clone -b hmr git@github.com:ahfarmer/minimal-react-starter.git
78 | ```
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "minimal-react-starter",
 3 |   "version": "0.1.0",
 4 |   "description": "Minimal react starter project",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "compile": "webpack",
 8 |     "build": "webpack -p",
 9 |     "start": "node server.js"
10 |   },
11 |   "keywords": [
12 |     "react",
13 |     "webpack",
14 |     "babel",
15 |     "minimal",
16 |     "starter"
17 |   ],
18 |   "author": "Andrew H Farmer",
19 |   "license": "MIT",
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git://github.com/ahfarmer/minimal-react-starter.git"
23 |   },
24 |   "dependencies": {
25 |     "babel-core": "^6.26.3",
26 |     "babel-loader": "^7.1.5",
27 |     "babel-preset-env": "^1.7.0",
28 |     "babel-preset-react": "^6.24.1",
29 |     "express": "^4.16.3",
30 |     "react": "^16.4.1",
31 |     "react-dom": "^16.4.1",
32 |     "webpack": "^4.16.3",
33 |     "webpack-dev-middleware": "^3.1.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const webpackDevMiddleware = require("webpack-dev-middleware");
 3 | const webpack = require("webpack");
 4 | const webpackConfig = require("./webpack.config.js");
 5 | const app = express();
 6 | 
 7 | const compiler = webpack(webpackConfig);
 8 | 
 9 | app.use(
10 |   webpackDevMiddleware(compiler, {
11 |     hot: true,
12 |     filename: "bundle.js",
13 |     publicPath: "/",
14 |     stats: {
15 |       colors: true
16 |     },
17 |     historyApiFallback: true
18 |   })
19 | );
20 | 
21 | app.use(express.static(__dirname + "/www"));
22 | 
23 | const server = app.listen(3000, function() {
24 |   const host = server.address().address;
25 |   const port = server.address().port;
26 |   console.log("Example app listening at http://%s:%s", host, port);
27 | });
28 | 


--------------------------------------------------------------------------------
/src/Counter.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | /**
 4 |  * A counter button: tap the button to increase the count.
 5 |  */
 6 | class Counter extends React.Component {
 7 |   constructor() {
 8 |     super();
 9 |     this.state = {
10 |       count: 0,
11 |     };
12 |   }
13 | 
14 |   render() {
15 |     return (
16 |       <button
17 |         onClick={() => {
18 |           this.setState({ count: this.state.count + 1 });
19 |         }}
20 |       >
21 |         Count: {this.state.count}
22 |       </button>
23 |     );
24 |   }
25 | }
26 | export default Counter;
27 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import Counter from "./Counter";
 4 | 
 5 | document.addEventListener("DOMContentLoaded", function() {
 6 |   ReactDOM.render(
 7 |     React.createElement(Counter),
 8 |     document.getElementById("mount")
 9 |   );
10 | });
11 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | module.exports = {
 4 |   mode: "development",
 5 |   context: path.join(__dirname, "src"),
 6 |   entry: ["./main.js"],
 7 |   output: {
 8 |     path: path.join(__dirname, "www"),
 9 |     filename: "bundle.js"
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.js$/,
15 |         exclude: /node_modules/,
16 |         use: ["babel-loader"]
17 |       }
18 |     ]
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <head>
3 |   <script src="/bundle.js" ></script>
4 | </head>
5 | <body>
6 |   <div id="mount"></div>
7 | </body>
8 | </html>
9 | 


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