This project is an Create React App - v1.1.4 boilerplate with integration of Redux, React Router, Redux observable & Reactstrap(Bootstrap v4) and Scss for quick start enterprise level applications.

Before starting with project, please headover to CRA documentation.

• React js - ^16.4.0
• Redux js - ^4.0.0-rc.1
• react-router-dom - ^4.2.2
• react-redux - ^5.0.7
• react-router-dom - ^4.2.2
• react-router-redux - ^5.0.0-alpha.9
• redux-observable - ^1.0.0-alpha.2
• Rxjs - Rxjs v6
• reactstrap - Easy to use React Bootstrap 4 components
• react-loadable - 5.4.0

• Scss
• Domain-style for code structure
• Bundle Size analysis
• Code splitting with react-loadable

1. Clone this repo

https://github.com/mohandere/cra-boilerplate.git

2. To run, go to project folder and run

$ npm install or $ yarn install (if you are using yarn)

3. Now start dev server by running -

$ npm run start or $ yarn start

4. visit - http://localhost:3000/

To create production ready codes -

$ npm run build

5. Analyze source code / bundle size

$ npm run analyze

for more commands refer package.json

Before starting development please go through -

• Presentational and Container Components
• All the fundamental React.js concepts, jammed into this single Medium article
• Tips to learn React + Redux
• When do I know I’m ready for Redux?

Refer src/home/ module for an ideal directory structure

Project uses Domain-style for code structure-

Domain-style : separate folders per feature or domain, possibly with sub-folders per file type

For more details refer /src/home folder.

Reference -

• http://redux.js.org/docs/faq/CodeStructure.html
• http://engineering.kapost.com/2016/01/organizing-large-react-applications/

Place all common components such as Header/Footer in src/common/components folder.

• Create a Module/Feature folder at src/ like - - src/home Feature folder must contain booststrap file named index.js and css file 'style.css' at root

Like -

• src/home/index.js
• src/home/style.css

Next as per need, add sub folders like -

• src/home/actions/
• src/home/reducers/
• src/home/epics/
• src/home/containers/
• src/home/components/

• Create folder named actions inside Feature folder like - src/home/actions
• Place actionTypes.js which contains all actions to be exported

• Create folder named reducers inside Feature folder like - src/home/reducers
• Place index.js which combines all reducers using combineReducers

• Create folder named epics inside feature/domain folder like - src/home/epics
• Place index.js which combines all epics using combineEpics

This boierplate comes with rxjs to handle ajax. Additionally as per need we can use other libs like axios.

Using Rxjs DOM api for ajax see file - rxjs/observable/dom/ajax AjaxObservable

we are using scss Preprocessor. Create a feature/domain specfic scss file, example - src/home/style.scss

After compilation the new corresponding CSS file next to it. example - src/home/style.css

Finally you can import that css file in index.js file example - src/home/index.js will import src/home/style.css

We can Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps and source-map-explorer great tool for this.

The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.

To analyzing bundle, run command -

$ npm run analyze / $ yarn analyze

Create React App(CRA) by default bundle out entire app into single main.*.js file with Webpack. As our app grows, bundle grows. So instead of downloading the entire app(This hurts the initial load time of our app.) before users can use it, We can split code into small chunks which we can then load on demand and Code splitting is really helpful for larger React apps.

Check out this. example for how to implementation Code splitting and how it helps to load application faster.

This boilerplate using react-loadable for code splitting.

Open src/App.js and edit this line to -

import routes from './routes';

To

import routes from './asyncRoutes';

Refer deployment section from CRA doc.

File an issue here.

MIT