React Scaffold

React project scaffold with redux and material-ui.

Best used for client side projects.

Feature

Project structure

flowchart

As we find out html are mostly same in react projects, we extract the same html into a template file which lays in html folder.

html-webpack-plugin is used to generate released html files, which load corresponding js files.

entry stores js main methods, we split main container to container because entry could not be hot-module-replaced.

entrys import containers, which is one to one correspondent. render method in entry provides all commonly used setups, such as redux store, provider, injectTapEventPlugin for material-ui, and custom styles.

container is the headquarters which imports all dummy components, passing through props to them. Also, container interacts with redux reducer and action.

We do not use async redux for ajax requests because ajax status is not that important for us to record. So, we invoke api in container, get response, and determine what action to call.

We store every string in i18n for better internationalization.

Built project files will be in the release folder. With build.log, you can see every build details. With stats.html, you can optimize your dependencies to make project smaller.

How to use

Feel free to submit any issue.

Project Code Base

gt-react-scaffold