前情提要：
昨天簡單地看過Flow，本來想繼續深入flow-React部分，嘗試的自己練習後發現弔詭的現象，預想會出錯的型別卻順利通過，果然沒有好好看說明文件直接上的風險就是可能會一頭霧水。
看看flow的cheat sheet。
嗯...還是先了解的大概再來吧XD

最開始鐵人賽的目標就設定在React、Redux和React Router，然後順便看看i18n。既然都快走到尾聲了，我們就來回憶一下這一個月走過的路吧。

React

建立UI的JavaScript library。

開發環境

因為想要簡單建置開發環境所以選擇Parcel，但最後還是會建議大家使用webpack，因為使用人數多、後援強，通常自己有問題的地方，其他人也會有，比較好找到解決方案。

JSX

JSX的部分，要注意的就是在設定class的時候要換成className以及label的for要改成htmlFor，其他像是屬性設定基本上都是camelCase，像是tabIndex，但data-*和aria-*一樣使用hyphen就好。

Components

react的靈魂角色component有區分Function component和Class component，基本上使用上除了需要用到lifecycle或設定state之外，使用Function Component會是更好的選擇。如果想避免相同props重複渲染可使用PureComponent，PureComponent仍屬於Class component的一員，如果想在Function component做相同的事，可以考慮使用React.memo，這是React v16.6.0出來的，之前好像沒提過，不過之後看到了，就在總結裡寫一下，反正都是親戚朋友。

Form

處理Form上又可以分成Controlled Components和Uncontrolled Components。Controlled Components可以讓form element一切都在掌握中，透過state儲存value，所有更新只能透過setState()。Uncontrolled Components則使用React.createRef()存取from element。基本上除了file input element外其它的form element都推薦用Controlled Components處理。另外也可以使用第三方library處理表單，像是Formik或redux-form都可以幫助我們簡單處理表單。

Redux

管理state的小幫手。

Redux相關概念

• store: 大腦擔當，協調Redux內所有moving parts
• createStore: 建立Redux store的function，內部的參數為reducer
• reducer: 產生state的function，內含2個參數(state和action)，並依據action type來計算新的state，當沒有對應的action type時會回傳initial state。
• combineReducers: 管理多個reducer。
• action: 改變state的唯一方法是向store發送信號，那個信號就是action。"Dispatching an action"就是發送信號的過程。
• middleware: 在dispatch action到action抵達reducer的過程間提供一個第三方的擴充點。可以用於記錄log、當機回報、與非同步API溝通、routing和其它功能。

react-redux相關概念

• Provider: 包裹整個React apllication，讓裡面的component可以取得store的state
• connect: react和redux的溝通橋樑。
• mapStateToProps : 透過mapStateToProps取得store的state，並回傳object作為props傳入component內使用。
• mapDispatchToProps: 和樓上做了類似的事，但是是對action，它連結Redux action和React component，可將action作為props傳遞給component使用。

React Router

前端管理路由的library。

• <Routers> : 放置<Route>的容器，react-router-dom提供兩種不同的routers，分別為：<BrowserRouter>和<HashRouter>
• <Route> : 由path屬性定義路由的規則，並透過匹配URL和path渲染對應的component。
• <Switch> : 遍歷所有的子層<Route>，只渲染與當前location匹配的第一個<Route>
• <Link>和<NavLink> : 無論在哪邊渲染<Link>，它都會被渲染成html的anchor(<a>)，透過to屬性的設定指定匹配的pathname。<NavLink>是特殊類型的<Link>，當anchor被點擊的時候可以設定activeClassName指定特定的class。
• <Redirect> : 當我們想強制navigation時，可以渲染<Redirect>前往指定的路徑。當<Redirect>出現在<Router>內時，可設定from來決定哪些path需要使用Redirect處理。

以上就是這一個月在React幼幼班的內容，至於後續的路，我們就等待明天揭曉吧~
大家晚安。