# React Native 入門
在正式開始開發 React Native App 之前我們先來介紹一下 React Native 的主要特色：

- 使用 JavaScript（ES6+）和 React 打造跨平台原生應用程式（Learn once, write anywhere）
- 使用 Native Components，更貼近原生使用者體驗
- 在 JavaScript 和 Native 之間的操作為非同步（Asynchronous）執行，並可用 Chrome 開發者工具除錯，支援 Hot Reloading
- 使用 Flexbox 進行排版和布局
- 良好的可擴展性（Extensibility），容易整合 Web 生態系標準（XMLHttpRequest、 navigator.geolocation 等）或是原生的元件或函式庫（Objective-C、Java 或 Swift）
- Facebook 已使用 React Native 於自家 Production App 且將持續維護，另外也有持續蓬勃發展的技術社群
- 讓 Web 開發者可以使用熟悉的技術切入 Native App 開發

## 1. 環境安裝與設定

- 若是想在 iOS 平台開發需要先準備 Mac OS 和安裝 Xcode 開發工具，若是你準備使用 Android 平台的話建議先行安裝 Android Studio 和 Genymotion 模擬器。
- 一開始請先安裝 Node、Watchman 和 React Native command line 工具
- 資料夾結構我們可以設計成這樣


## 2. 開發流程

// 若你使用 Mac OS 你可以使用官網安裝方式或是使用 homebrew 安裝
$ brew install node
// watchman 可以監看檔案是否有修改
$ brew install watchman

## 3. Response 規範

- Response Data 必須為 小陀峰命名規則 並且為 json type
- Http Status 必須正確回應 200, 401, 403, 500 , 503
- 任何 Request 都需回傳

| 欄位名稱 | 型別 | 說明 | 範例 |
| ------------ | ------------ | ------------ | -------|
| statusType | string | 判斷Client發出的Request驗證結果 | success: 驗證成功, error: 驗證失敗 |
| statusCode | number | 工程方便除錯使用代碼 或 不同錯誤類型前端會拿來做判斷要做什麼畫面回饋 | 未定義 |
| message | string | 定義成功失敗等等訊息 (需多語系) | 儲存成功 |
| formMessage | object | 定義表單各別欄位的錯誤訊息 | {column: ‘欄位名稱’,message: ‘回饋訊息’} |
| data | object | 前端取用的資料 | {rows: {name: imagine} } |
| newMemberToken | string | 後端判斷Token過期, 並且在可刷新時間內, 則將新token自動發行夾帶回傳 | JWT字串(不含Bearer) |

Q1. 如果表單送出到後端API, 但因某個欄位驗證失敗, 那 statusType 應該傳 success 還是 error
> Ans: 要傳 error, 但 http status 還是 200, 這個 statusType 是驗證類別

Q2. 為什麼 data 裡面需要放置一個 rows, 不直接放置資料就好
> Ans: 當前端需要取得「多筆資料」的時候, 我不希望把 data 型別從 object 改成 array, 所以固定透過一個 rows 的 array{ object } 型態的欄位, 來固定取得這種 `主要的多筆資料`, 若我需要額外的資料則可放在 data 跟 rows 同層 (例如 page, limit)

## 修訂
- 20181130 刪除 Client-IP, 因為 proxy 後的 使用者IP, 後端已經有解
- 20180717 原本有 rows 取多筆, row 取單筆, 現在取消 row 這個固定使用欄位 (感覺沒必要)

## 參考連結
- [Web APIs 設計](https://ihower.tw/cs/web-apis.html#sec1)
- [保持SOLID的單一職責原則(SRP)](https://dotblogs.com.tw/givemin5/2016/05/01/022744)
- [Http狀態碼](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status)