The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, pls feel free to let me know.many thx.
Based on React 18, React Route 6.x, Mobx 6.x
Project address
When R&D developers are working at the same time, and the business is complex, it is necessary to divide the business into modules and decouple it
Such as there are A, B, C, etc modules, they will be isolated at key layers such as Store, Api, Page etc.
1.2 Views compatible for Mobile and PC
There are about 3 ways for views to be compatible with mobile and PC.
Different projects: When the user enters the URL in the browser, response the corresponding mobie or pc page by nginx parsed useAgent
Different page components: When the user enters the URL in the browser, it is determined by the userAgent, if the mobile or pc page component is mounted on the routing path.
The same page component: determine the rendering of mobile or pc pages through parsing userAgent inside the page component
Of course, it can also be determined according to the browser resolution, or browser resolution + userAgent.
In our project I choose is the 'different page components' method, you can check out the details on 10 Compatible for Mobile and PC
1.3 Authentication
Set isAuth for each route in every routes.ts. The default isAuth is true, which means authentication is required
If authentication is required, It will render login component first unless it has logged in.
There are 2 ways to process I18n for project as follows
Support to write internationalized code anywhere, including any js file, and then switch the language by window.location.reload()
Only supports writing internationalized code in React components, and switchs language by hooks
Since the second one does not need to reload pages, more friendly experience, so use it in this project
pls refer to demo page component
1.5 Directory Structure
The following is an explanation of each layer of the architecture
Postman/Swagger in bottom of architecture means after providing API documents in the back-end, use them for debugging
2. Network request and service processing
2.1
2.2 code of View Layer
Store.onLoad(action) is automatically called through the page root component Page
Or the page calls the api through store.action
Refer to pages/home/index.tsx for details
2.3 code example of page store
If the page is wrapped by components/page component, onLoad in Store will be executed automatically when the page is initialized, execute automatically onUnload in Store when the page is unloaded.
Define a methed for calling api
call api in store
All interface type are defined in @types directory
Refer to store/home' for more detail
2.4 http.ts code
Refer to http/base/http for more detail
MobX builds store, which is equivalent to the page model layer, and the model layer is responsible for calling the Apis
Compared with the Redux (dispatch(action) -> reducer -> new state) process, the store class of MobX looks natural and simple; in addition, Redux needs to rely on middleware, such as the plug-in Redux-thunk to call Api, but MobX does not. Finally, the Redux update component needs to be obtained asynchronously through store.subscribe, and MobX is a synchronous and responsive update. The above is the reason for replacing Redux with MobX.
3. Utils
There are many auxiliary JS classes under the helper package
3.1 Content
3.2 Internationalization
3.3 Contants
3.4 Config
Generate configuration items based on env in different environments
For others, please check the code under helper
4. Page Container
All pages are placed under pages, and public components are placed under components
4.1 components
If it is not a public component, only used for a certain page, pls placed in the components folder of the corresponding page. such as home/components
4.1.1 Page root component
Extracting the root component is to reuse some common logic of all pages. For example, it will automatically process the initialization onLoad and unload onUnload of all page stores.
For others, please check the code under components
Call action/variables through store.xxx
Example code is in pages/home
5. UI component library
For some common ui libraries such as Bootstrap, Material UI, Andt, etc, are easy to integrate into the project.
The following is an example of integrating Antd.
Set BASEURL to mock server host in .env.mock, so all request will connect to it
7. Log
7.1 Catching React Exceptions
7.2 Log upload
At present, after the exception logs are collected in helper/log, they are only printed to the console, and normally should be uploaded to the log platform, such as Sentry.
Note: Asynchronous exceptions such as Promises need to be caught by try...catch
8. Unit Test
8.1 add unit test
add unit test file in __tests__/unit directory
use assert of jest for common function, such as js-dom-test-spec.js
use enzyme or testing-library for react component, such as app-spec.js
exec command yarn test
Refer to Jest 27.xcreate-react-app unit testenzyme
8.2 Check out coverage
exec command yarn test:coverage
9. Pre Commit
9.1 Code format
9.2 Validate commit message
validate commit msg by commitlint, Refer to commitlint
Message format such as 'feat: AAX-XXX...'
10 Compatible for Mobile and PC
10.1 Load the corresponding global style
10.2 Load the corresponding hooks/components inside the page
10.3 Load the corresponding page component inside the router
If in mobile envorinment, mount the mobile page component , otherwise, mount the pc page component
10.4 Example
mobile
pc
11. Other
The helper/hooks folder shows 1 hook examples
It is recommended to use memo+useMemo+useCallback for components to avoid repeated rendering
The following is the Chinese version, the same content as above
Project architecture diagram
Technology stack of project
The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, pls feel free to let me know.many thx.
yarn mock
1. Key design
1.1 Business decoupling
1.2 Views compatible for Mobile and PC
There are about 3 ways for views to be compatible with mobile and PC.
1.3 Authentication
1.4 I18n
There are 2 ways to process I18n for project as follows
1.5 Directory Structure
2. Network request and service processing
2.1![Newwork](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622075439.png)
2.2 code of View Layer
Define a methed for calling api![page_api](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622080402.png)
call api in store![call_api](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622080504.png)
2.4 http.ts code
3. Utils
3.2 Internationalization
3.3 Contants
3.4 Config
Generate configuration items based on env in different environments
![](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622082336.png)
4. Page Container
4.1.1 Page root component
4.2 Router
4.2.3 Define Route for certain page module
4.3 MobX state management
4.3.1 Define store
Init every store![store_2](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623174931.png)
All store wrapped in Context![store_3](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623175028.png)
4.3.2 Store used in page
5. UI component library
6. Compile and package
6.1 Configuration items
Set BASEURL to mock server host in .env.mock, so all request will connect to it
![](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623104012.png)
7. Log
7.1 Catching React Exceptions
7.2 Log upload
8. Unit Test
8.1 add unit test
9. Pre Commit
9.1 Code format
9.2 Validate commit message
10 Compatible for Mobile and PC
10.1 Load the corresponding global style
10.2 Load the corresponding hooks/components inside the page
10.3 Load the corresponding page component inside the router
10.4 Example
mobile![mobile](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220704170934.png)
pc![pc](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220704171018.png)
11. Other
The following is the Chinese version, the same content as above
架构图
技术栈
yarn mock
1. Key design
1.1 Business decoupling
1.2 Views compatible for Mobile and PC
有如下 3 种方式可以让View层与Mobile和 PC端兼容。
1.3 Authentication
1.4 I18n
有如下2种处理项目I18n的方式
1.5 Directory Structure
2.Network request and service processing
2.1 Flow
2.2 code of View Layer
定义调用api的action![page_api](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622080402.png)
在 store 中调用 api![call_api](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622080504.png)
2.4 http.ts code
3. Utils
3.2 Internationalization
3.3 Contants
3.4 Config
基于不同环境下的env生成配置项
![](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220622082336.png)
4. Page Container
4.1.1 Page root component
4.2 Router
4.2.3 Define Route for certain page module
4.3 MobX state management
4.3.1 Define store
初始化每个store![store_2](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623174931.png)
所有store包裹在Context里![store_3](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623175028.png)
4.3.2 Store used in page
5. UI component library
6. Compile and package
6.1 Configuration items
将 BASEURL 设置为 .env.mock 中的模拟服务器host,于是所有请求都会访问它![](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220623104012.png)
7. Log
7.1 Catching React Exceptions
7.2 Log upload
8. Unit Test
8.1 add unit test
9. Pre Commit
9.1 Code format
9.2 Validate commit message
10 Compatible for Mobile and PC
10.1 Load the corresponding global style
10.2 Load the corresponding hooks/components inside the page
10.3 Load the corresponding page component inside the router
10.4 Example
mobile![mobile](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220704170934.png)
pc![pc](https://raw.githubusercontent.com/mominger/MyPublicFiles/master/img/20220704171018.png)
11. Other