Introduction

This source has been created for a dynamic React project. We used some similar technology:

• Reactjs is core technology.
• Redux & Redux-toolkit for control application state (it's easy if you wanna change to MobX). Remove it if you won't use.
• Typescript to make our code to be more reliable.
• React Router for navigation in application.
• Material UI is our UIKit (do not depend on it), you can change to another without any effect.

Let's start

• Recommended node 14 or later.
• Clone this repo using git clone https://github.com/rintran720/react-redux-typescript.git <YOUR_PROJECT_NAME>
• Move to the appropriate directory: cd <YOUR_PROJECT_NAME>
• Run npm ci (recommended) or yarn in order to install dependencies and clean the git repo.
• At this point you can run npm run dev or yarn dev to run at deployment.
• To run at production: npm start or yarn start.

Document

The application will be implemented in ./src folder

1. App.tsx

This file is master component of whole project. You should add all global providers in here.

2. Assets

All assets will be saved at ./src/assets.

3. Navigation

To control screen views and register screens in you app. Update RootNavigation if you want to change the root navigation of whole application. Please check document at React Router.

4. Types

Keep your application types in here.

5. Modules

Divide your application to many domains, in ./src/modules you keep the common domain and all custom domain. In each domain, we have:

• containers: this is smart components with logic implement, can you components to show what you want. E.g. Facebook login button. To implement, you should use a component to show UI, keep all business logic in container and style at style file.
• components: this is pure components only with UI logic, they will render base on props. The component use UI base at common domain, recommended do not use library directly.
• hooks: useful custom hooks

Get more information at Smart and dumb component or Stateful and stateless component

6. Pages

Get all pages you have in here, this idea come from NextJs.

7. Constants

Keep constants in here.

8. Utils - Helpers

In this folder, I write all util/helper functions.

9. Api - HTTP Client

Make instance of Axios or other HTTP Client. More information at Axios

10. Store - Application state

To implement stores for application. In this case, I use Redux and Redux-toolkit to manage application state. If you wanna change to Mobx, be free to do it.

*Note: Should use dispatch, useSelector,... in containers.

11. Theme

Implement theme of application in here.Please check at Material UI

12. Language

In this folder, we save all custom language. To use it please check i18next

DevOps

Check devops process at DevOps

Notes

Strick Mode

In development mode you can see React call API twice, Don't worry! THIS IS A FEATURE of React.StrictMode. It's will be fine in production. You can remove React.StrictMode provider to disable, but I'm not recommended.

Check more information at React.StrictMode

Discus about this at Reddit