---
tags: N108
---
# N108 快速入門
:::warning
**請邊看 code，邊看文件**
:::
- [使用模版 *WKE gitlab*](https://gitlab.wke.csie.ncnu.edu.tw/react/Redux)
- [Git專案](https://github.com/KevinTeng0207/N108-React)
## 使用前端框架
- ReactJS
## 使用伺服器框架
- Node.js express
## 資料庫
- MSSQL Server
## 開發瀏覽器
- Chrome
### root 資料夾說明

| 名稱 | 類型 |描述 |
| :------ | :----------- | :----------- |
|src|dir|主要撰寫資料夾，分成 <font color='red'>app</font> 以及 <font color='red'>public</font>|
|.babelrc|<font color='DarkKhaki'>babelrc</font>|Compile JSX|
|.gitignore|<font color='gray'>gitignore</font>|設定不公開資料以及文件，不上傳 git|
|config.dev.json|<font color='Gold'>json</font>|開發環境參數設定，包含apiUrl、cors|
|config.json|<font color='Gold'>json</font>|完整封包參數設定，包含apiUrl、cors、網站名稱(title)|
|package-lock.json|<font color='Gold'>json</font>|包含套件版本、名稱、描述、作者、script、dependencies|
|package.json|<font color='Gold'>json</font>|包含套件版本、名稱、描述、作者、script、dependencies ==and locked version of the project.==|
| webpack.prod.js | <font color='DodgerBlue'>js</font> | 生產環境 (production) 設定 |
| webpack.dev.js | <font color='DodgerBlue'>js</font> | 開發環境 (develope) 設定 |
| webpack.common.js | <font color='DodgerBlue'>js</font> | 全環境共用設定 |
### src/app 資料夾說明
| 名稱 | 類型 |描述 |
| :------ | :----------- | :----------- |
| actions | dir | *沒使用* |
| components | dir | 各式 component，並用功能分類 ==(詳細介紹請回首頁)== |
| containters | dir | 路徑內包含 App.jsx，視為 <font color='red'>Main</font> 程式 |
| image | dir | 包含各式圖片以及 gif ==(詳細介紹請回首頁)==|
| json | dir | 各式 json ==(詳細介紹請看下方)==|
| lib | dir | 各式 function ==(詳細介紹請看下方)== |
| reducers | dir | *沒使用* |
| sagas | dir | *沒使用* |
| store | dir | *沒使用* |
| styles | dir | style & css 函數庫 ==(詳細介紹請回首頁)== |

### app/json 資料夾說明
| 名稱 | 類型 |描述 |
| :------ | :----------- | :----------- |
| json/code.json | <font color='Gold'>json</font> | 各年級代碼名稱以及顯示顏色設定 |
| json/school.json | <font color='Gold'>json</font> | 各學校類別英文名稱對應CID |
| json/SSO.json | <font color='Gold'>json</font> | 4種登入角色對應 API 名稱|

### app/lib 資料夾說明
| 名稱 | 類型 |描述 |
| :------ | :----------- | :----------- |
| lib/api.js | <font color='DodgerBlue'>js</font> |主要 api function|
| lib/collectform.js | <font color='DodgerBlue'>js</font> | Get form information |
| lib/createAction.js | <font color='DodgerBlue'>js</font> | *沒使用* |
| lib/IDtopath.js | <font color='DodgerBlue'>js</font> | call API 時使用，將圖片 ID 轉換成路徑|
| lib/pathtoID.js | <font color='DodgerBlue'>js</font> | call API 時使用，將路徑轉換成圖片 ID|

### src/public 資料夾說明
| 名稱 | 類型 |描述 |
| :------ | :----------- | :----------- |
| ima | dir | 網站 ico 存放處 |
| index.html | <font color='orange'>html</font> | 為頁面模版，根節點為root到時會把組件透過ReactDOM.render描繪致此 |
### Run

npm install
npm start

### Bulid

npm Bulid