React js boilerplate is to help you kick start your react web application, with all bundling and build configured for you.

• yarn or npm
• Node.js

1. yarn or npm install
2. yarn build:watch to build all files into dist folder and watch for any changes
3. yarn start:server to start node development server and host dist folder browse http://localhost:8080/
4. yarn json-server to create test json api http://localhost:3001/

1. ES6 Features
2. React Redux to maintain application state
3. React Thunk to handle asynchronous actions
4. axios to handle all api calls ['GET','POST','PUT','DELETE', ...]
5. React CSS Modules to be able to build modular CSS code for each React component.
6. React Router v4 for routing between application pages
7. Bootstrap v4 for grid system and all new bootstrap 4 features
8. Svgo to make sure all your svg icons are optimized
9. Node express based development server
10. json-server no need to wait for backend api's to start development, use json-server to have test data and test api ready for use

Webpack is the only tool used in this project for bundling project dependencies and build, copy files.

1. babel-loader with ['es2015', 'react', 'stage-1'] presets for ES6 features and React JSX transpilation to ES5 understood by all browsers.
2. sass-loader Loads a Sass/SCSS file and compiles it to CSS
3. css-loader interprets @import/url() to js modules
4. postcss-loader to process CSS with PostCSS
5. style-loader
6. file-loader interprets @import/url() to image files, to copy them to dist folder and return url for these images
7. svg-sprite-loader to add all your icons in one sprite.svg file and interpret @import from javascript or url() in css
8. svgo-loader to optimize svg before generating final sprite.svg

1. uglifyjs-webpack-plugin for javascript minification
2. copy-webpack-plugin used to copy index.html to dist folder
3. extract-text-webpack-plugin extract final bundled css files to dist folder
4. svg-sprite-loader/plugin part of svg-sprite-loader to generate final sprite.svg in dist