# 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/

# React
- abstraction: view library
- virtual DOM
- synthetic event(event handler)
- what is jsx and why
- cycle js

<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](https://reactjs.org/docs/react-component.html#shouldcomponentupdate)

# Redux
- 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))

- resources
- [egghead.io: Redux 作者](https://egghead.io/courses/getting-started-with-redux)
- https://redux.js.org/
- https://github.com/camsong/redux-in-chinese

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

# TangleID
- e.g. fetch user list
- button click ->
action ->
ok || err
- [material UI](http://www.material-ui.com/#/)
- https://loading.io/
- grid

###### tags: `tangleid`