ClientDev Bootcamp

Nodejs

npm
- package-lock.json
es6, es7 syntax
```
const [a, b] = obj
```
tools
- process manager
  - forever
  - pm2
- build tools
  - git-cz
  - heroku: 部署工具
resource
- babel: 打包前端
- (optional) https://babeljs.io/docs/plugins/transform-react-jsx/

<Form>
    <Input1 />
    <Input2 />
</Form>

lifecycle methods
- render，或狀態改變之前的預處理
component == function
props v.s state
- controlled component: 只有 props，沒有 state
- e.g. input
resource
- https://reactjs.org/docs/react-component.html
  - shouldComponentUpdate

overview
- 狀態管理
state & action
- action: 改變狀態
- state: 可以傳到 react 的 props
store
- 存放 state
- 接收 action 改變 state
reducer
- 透過 reducer 計算改變狀態，再通知 store
- rootReducer: 最巨大的 reducer
- reducer 可以拆分: 以combineReducer合成
middleware
- action –> reducer(計算下個狀態) –> middleware –> store
- 不知道該在哪處理的事情，通常會丟到 middleware 中
- tangleId 中的 CALL_API
- redux-saga
  - https://denny.qollie.com/2016/05/14/redux-saga/
- redux-observable
- redux example: Realworld
Connect to React
- Provider

store.dispatch(fetchData(params))

Overview
- what
  - 使用資料夾分類要 render 什麼 page，一定要有 pages 資料夾
- ssr
directory + Route
style
Resource
- https://learnnextjs.com/
- https://github.com/zeit/next.js/tree/master/examples