React Seed

Table of contents

Project structure

Installation

Configuration

Technologies used

Project structure

build/
src/
|- index.jsx _______________________________ # Application entry
|- App.jsx _________________________________ # Application init
|  |- Components/
|    |- hello-world/
|       |- index.jsx _______________________ # Default
|       |- hello-world.jsx _________________ # Component
|       |- hello-world.scss ________________ # Style

webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config      

Installation

1- Clone the boilerplate repo

2- yarn or npm install to install npm packages

3- start dev server using yarn start or npm start.

3- build and bundling your resources for production yarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you. yarn test

Configuration

• Webpack Config paths based on your file structure you can go to webpack/paths.js and modify the source and file names based on your need.
• webpack/webpack.common.js config common webpack for both dev and production environments.
• webpack/webpack.dev.js config webpack for dev environment.
• webpack/webpack.prod.js config webpack for production environment.
• /webpack.config.js main webpack config that merge common and webpack environment based config.
• Enzyme config /setupTest.js here you will have all setup for enzyme to test your component.
• Prettier config /.prettierc.
• Browsers list config /.browserslistrc.

Technologies used

• Webpack 4
• Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
• React 16.4
• Lodash
• Jest [ Unit test]
• Enzyme for UI testing.
• Eslint with airbnb config
• Prettier [ Code formatter ]
• Style & CSS Loader & SASS-loader
• CSS modules [ Isolated style based on each component ]
• Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
• React hot loader
• Webpack serve [ using web socket ]