React js boilerplate

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

Prerequisite:

• yarn or npm
• Node.js

---

Setup:

1. yarn or npm install
2. yarn start:dev to build and watch for changes, also a dev server will start on http://localhost:8080/

Other scripts:

1. yarn json-server to create test json api http://localhost:3001/
2. yarn lint to run eslint on src folder and display code errors if any
3. yarn flow to run flow

---

Features:

1. ES6 Features
2. React Redux to maintain application state
3. Redux 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 to start development, use json-server to have test data and test api ready for use
11. eslint the project contains eslint with eslint-config-airbnb extended, to fix and flag javascript code errors.
12. flow static type checker for javascript
13. husky to add pre-commit hook that will trigger yarn lint && yarn flow to make sure no bad commits are pushed

---

Bundling/Build using Webpack:

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

Loaders:

1. babel-loader with ['es2015', 'react', 'stage-1', 'flow'] 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

Plugins:

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
5. compression-webpack-plugin for gzip compression of scripts.js

---

Editor recommendation:

You can use any prefered editor, in case you are using Atom the following packages can help speed up your development process:

• react
• linter-eslint
• flow-ide