A fairly minimal React app starter designed to facilitate comprehension of the underlying tools.
I wanted a boilerplate for setting up a new React project without the full array of tools and abstractions that come with create-react-app
(CRA).
Some beginners don't grasp that "React is just JavaScript" because CRA and JSX make it feel like you're working with a magic framework. React is great because it's just a UI library. The aim of this project is to demystify React development and give the developer complete understanding, and thus control of the toolchain.
This boilerplate provides:
- A hot-reloading development server
- Bundling with webpack
- Compiling with Babel
- A basic HTML template (for
html-webpack-plugin
) and sample favicon - A production build script (literally
yarn build
)
Unlike CRA, min-react-starter
doesn't include a bunch of comments in all the config/template code, so you won't have to go remove all those when you're making this your own. The code is still understandable because min-react-starter
is less complex than CRA. Relatedly, min-react-starter
does not include all the the functionality of CRA and is not a replacement.
I like to know exactly what is happening when I run yarn start
and to faciliate this included only what I considered the cleanest base setup. When I start developing, I add packages and webpack loaders & plugins as needed.
The following sections assume you have the following installed:
Install the dependency packages.
yarn install
Bundle and transform the input files (with webpack), start & open the development server, and serve the output.
yarn develop
First, yarn develop
runs the develop
script in package.json
(webpack-dev-server --hot --open --mode development
)
This will use the configuration set in webpack-config.js
Next, webpack will bundle and transform the input from the src/index.js
entrypoint (all modules and files import
ed here) using the loaders and plugins specified in webpack-config.js
min-react-starter
uses only one loader and one plugin.
webpack-config.js
specifies babel-loader
which will transform all files with a .js
extension using the babel configuration set in .babelrc
.
webpack-config.js
specifies the html-webpack-plugin
, which will inject a script tag referencing the bundled JavaScript into the end of the <body>
specified in public/index.html
. It will also include a <link>
to public/favicon.ico
in the <head>
.
Finally,* the development server will serve the built application using the configuration set in webpack-config.js
(http://localhost:5000).
yarn build
Bundles and transforms src files with webpack mode set to production. Outputs to /dist
, which can then by served (e.g. by a CDN; I like Netlify).
As your project grows, you'll likely want to add some features:
- Additional webpack loaders (e.g.
file-loader
,css-loader
,style-loader
) (I often use styled-components, so I didn't want to include these by default) - A separate
webpack.config.dev.js
andwebpack.config.prod.js
(see https://webpack.js.org/guides/production/) - Add
historyApiFallback: true
todevServer
inwebpack.config.js
for single index.html SPAs using the History API (which is also used by React Router.
This project only has two client dependencies, react
and react-dom
.
For the toolchain, we also need:
- Babel (
@babel/core
,@babel/corepreset-env
,@babel/corepreset-react
,babel-loader
) webpack
andwebpack-dev-server
(andwebpack-cli
)html-webpack-plugin
The full list is given below, from package.json
.
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}