Repository files navigation

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

• yarn ornpm
• Node.js

1. yarn ornpm install
2. yarn start:dev to build and watch for changes, also a dev server will start onhttp://localhost:8080/

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

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, usejson-server to have test data and test api ready for use
11. eslint the project contains eslint witheslint-config-airbnb extended, to fix and flag javascript code errors.
12. flow static type checker for javascript
13. husky to addpre-commit hook that will triggeryarn lint && yarn flow to make sure no bad commits are pushed

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', '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 withPostCSS
5. style-loader
6. file-loader interprets@import/url() to image files, to copy them todist 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 orurl() 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 copyindex.html todist folder
3. extract-text-webpack-plugin extract final bundled css files todist folder
4. svg-sprite-loader/plugin part ofsvg-sprite-loader to generate finalsprite.svg indist
5. compression-webpack-plugin for gzip compression of scripts.js

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

• react
• linter-eslint
• flow-ide