reactpage

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.

Supported Integrations

• 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

Features

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

Getting Started

1. Clone this repo

https://github.com/skywing918/reactpage.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

Code structure

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/

Common components

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

Adding new Module/Feature

• 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/containers/
• src/home/components/

Actions

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

Reducers

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

Epics

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

Ajax Handling

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

Styling

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

Analyzing the Bundle Size

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

Deployment

Refer deployment section from CRA doc.

Something Missing?

File an issue here.

License

MIT