├── .gitignore ├── .babelrc ├── www └── index.html ├── src ├── main.js └── Counter.js ├── webpack.config.js ├── server.js ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | www/bundle.js 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | 8 | 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 23 | ); 24 | } 25 | } 26 | export default Counter; 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 `