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
- Clone this repo
https://github.com/mohandere/cra-boilerplate.git
- To run, go to project folder and run
$ npm install
or
$ yarn install
(if you are using yarn)
- Now start dev server by running -
$ npm run start
or
$ yarn start
- visit - http://localhost:3000/
To create production ready codes -
$ npm run build
- 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 namedindex.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 usingcombineReducers
- Create folder named
epics
inside feature/domain folder like -src/home/epics
- Place
index.js
which combines all epics usingcombineEpics
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