or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
REACT 整體架構與開發流程
tags:
公司專案
、readme
、ow-dashboard
⚑ step1: 初始動作
複製整個 src 架構和
.env
,.env.example
,.gitignore
檔案後,清除 src 架構裡的 apis, assets, Containers, routes, Sagas, Stores,執行npm start
,ok 再進行開發。⚑ step2: 路徑(routes)
1. 路徑進入點之檔案區分
return(<HomeLayout>...</HomeLayout>)
return(<EmptyLayout>...</EmptyLayout>)
2. 路徑進入點之程式碼擷取
3. 路徑進入後之詳細架構:
依照 react-router-dom 原理,寫HashRouter。先判斷路徑、渲染指定的畫面。若沒有指定路徑,則依 react-router-dom 原理,將根目錄導到想要的路徑。
⚑ step3: 畫面(View)
1. 畫面架構:
在路徑宣告裡,會提到
component={LoginScreen}
,指的是當使用者路徑為某網域/login
時,會在畫面裡先渲染出名為 LoginScreen 的元件(Components),而它包在名為 LoginScreen 的容器(Containers)。2. 畫面架構之容器(Containers):
(1) 檔案路徑:Containers/LoginScreen.js
(2) 先定義需要的 css style 和 function。如:
(3) 再渲染並回傳內容到指定的地方。 如:
(4) 定義好的 css style 是用 JavaScript 中 Object 的方式拿取。如:
(5) 定義好的 function
(6) 回傳到指定的地方時,有兩種公司寫好的容器元件。分別是 置中的
LoginMiddleView
和 置右的LoginView
。3. 畫面架構之元件(Components):
(1) 檔案路徑:Conponents/LoginMiddleView.js
(2) 先定義需要的 css style 和 function。如:
(3) 再渲染並回傳內容到指定的地方。 如:
(4) 定義好的 css style 是用 JavaScript 中 Object 的方式拿取。如:
(5) 回傳到指定的地方時,
➀使用
<Form>
這個 tag,在裡面定義使用者填寫完成時 要做的 function,此 function 是將使用者輸入的值指定給 Containers/LoginScreen.js 的 handleLogin function 回傳的值。➁基於 AntDesign,公司寫好的元件(Components/common/FormInput.js),使用
<FormInput>
這個 tag,做兩個輸入框給使用者填寫帳號與密碼。⚑ step4: 動作(action)
1. 動作架構之 Saga
(1) 原理(緣由)
因為有在登入頁的
<Form>
tag 中,寫onFinish={value => handleLogin(value)}
,所以會把兩個輸入框的值帶到處理階段。(2) Saga 之路徑進入點
(3) Saga function
UserSaga.js
。並在該檔案裡,再細分很多 function,如 login, getUserInfo …等。Sagas/UserSaga.js
User.login()
apis/User.js
login: () => '/api/auth'
2. 動作架構之 Store
(1) 主要(通常只)會在主功能資料夾放三支 js 檔案,分別為:
InitialState.js
Action.js
Reducer.js
(2)
InitialState.js
:定義相關值的預設型態。(3)
Action.js
:將值寫入。(4)
Reducer.js
:依值是否需要多加處理而分兩種情形。3. 動作架構之 apis
⚑ step4: 切版 ⇾ css framework 使用 Ant Design
1. Ant Design 是一個支援 React 的 開源樣式庫。
2. 使用開源組件與客製化的方式