Talk about large React project structure

I dedicated to the web-development fields for 2 years. I remember when I start to learn front-end skill, the most struggle stuff to me is project structure design. This article, I will share our team experience on project structure design. (Note: It’s not the Best Practice, the project structure depends on your scenario)

When we kick-off a project, we want project including following things:

1. follow create-react-app, avoid to use webpack (it’s to complicated)
2. easy-managed router (react-router)
3. code splitting based on different components, only loads necessary js file. (react-loadable)
4. easy-managed states, keep all data from the same source. (redux)
5. separate UI logic, data select logic (reselect) and data fetching logic.
6. handle async actions (redux-observable).
7. use third-party design system (material-UI)
8. support i18n (react-i18next)
9. consistent coding style (eslint, prettier)

react-loadable

We want our web application serve as many features as possible. The more features we have, the larger codebase we need to handle. It is reasonable to expect the performance of web application will dwindle. Code splitting is a technique where an application only loads the necessary code. It’s doable in React by using react-loadable. React-loadable is a higher order component for loading components with dynamic imports.

Following is using an ordering system for example, if users want to order something, application only loads order-related components. And if users want to check profile in account page, application only loads account-related components.

react-loadable-example

Separate logic for UI, data selection, data fetching, states

Separate logic can help developer maintain project more easier.

our data flow

Responsibilities of each component:

• View: UI logic only, dispatch actions (e.g. fetchProfile), and get states from selectors.

• Action: define action name
• Middleware: handle async event (e.g. call API)
• Reducer: store data from API result, let data structure as consistent with database as possible.

We use redux-toolkit to let develop redux component more easier. Using createSlice functions can automatically generates action creator functions, action type strings, and a reducer function. (you can check basic tutorial for redux toolkit)

• Selector: select data from store, let data structure as consistent with UI logic as possible.

We use reselect library to select data from store because it is efficient, composable, and allowing Redux to store the minimal possible state. (The official page of reselect library already detailed introduce. It’s no need to show example here)

Third party designed system — Material UI

Following are the reasons why we use material-ui.

• Based on Google Material Design. The guideline is easy to follow. It’s good for both developers and designers.
• Well document and have many examples
• Allow responsive UI
• Customize, you can create your own theme.

After everything set up, the folder structure will look like:

- apis/          // api definitions
- components/    // UI logic and data select logic
- containers/    // setup router and react-loadable
- features/      // data fetching logic, states logic
- redux/         // setup middleware, reducer and store
- styles/        // setup global styles
- utils/         // setup common functions
- index.js
- App.js

You can reference example from here. I hope above sharing can help you to focus on UI logic and Business logic implementation. Thanks for your reading.