:fire: react-boiler :fire:

Boilerplate Project for React.

Simple setup that comes with hot-reloading, styled-components, and test setup with watch and coverage

Scripts

npm start - Starts the app on http://localhost:8080

npm run test - Runs all the tests once

npm run test: watch - Runs the tests, and watches for changes, running only changed files

npm run test: coverage - Runs the tests with coverage and watches for changes, running only changed files

Webpack

loaders

babel-loader - Transpiles js & jsx down to es5

plugins

base

clean-webpack-plugin - Deletes the dist directory before building a new bundle

html-webpack-plugin - Creates a new html file, using the one under /src as a template, and outputs it in the dist directory with the newly created js bundle injected in the body

prod

uglifyjs-webpack-plugin - Uglifies the code making the bundle smaller

webpack: DefinePlugin - used to set process.env.NODE_ENV === 'production' which allows some libraries (like react) to realize it's in production mode and thus eliminate unnecessary code, read more

webpack: ModuleConcatenationPlugin - Hoists the scope of all modules into one closure, allowing for faster code execution in the browser

analyze

webpack-bundle-analyzer - Visualizes the output bundle, making it easy to see what's inside the bundle

Babel

Presets

env - Allows the use of es2015, es2016 & es2017 features

stage-0 - Allows the use of upcoming es features at stage 0 and greater

react - Transforms jsx to js

Plugins

styled-components - Allows for better debugging & minification

runtime-transform - Used to enable the use of async actions, which require generator polyfills

prod

transform-react-inline-elements - Compiler optimization which replaces the React.createElement function with babelHelpers.jsx

transform-react-remove-prop-types - Remove propTypes from the build, making the bundle smaller