# React 課程
###### tags: `前端課程` `React`
書本1：React&Redux Web應用程式前端高校開發技術
書本2：React 全面昇華你的FrontEnd境界(熱銷版)
書本3：React.js 頂尖開發
書本4：從Hooks開始讓你的網頁React起來

:::info
:bulb: 課前確認他們在實習公司使用的技術。
:::

### [[第01堂] 前端框架](https://hackmd.io/v6rjuyduTte3eXwi_AfDew)

* 簡單介紹前端框架
* 三大框架
* Angular
* Vue
* React
* React
* SPA
* SEO
* DOM
* Virtual DOM

### [[第02堂] 前端框架](https://hackmd.io/EUiWpU5DT-Sxg5RvGWlyDg)
* 安裝環境
* Node.js
* Nvm
* 基本指令

### [[第03堂] React基礎知識](https://hackmd.io/-UasxrhFSdGor1pUkz485A)
* JSX (書本1 Ch5)
* Scss
* Function/Class Components
* this、props、state、context (書本1 Ch6)
* setState
~~* 事件~~
* router
* 可以安裝的套件

### [[第04堂] 生命週期](https://hackmd.io/HrbOVdZzTBi5_It-nu6ong?both)
* 生命週期

* hook

### [[第05堂] Redux](https://hackmd.io/D5CjdinBRFq2w8TKZQZT1A?both)
* 專案架構
* Redux (mapStateToProps、mapDispatchToProps)(書本1 Ch8)
* redux-saga
* redux-thunk

### [[第06堂] 資料流](https://hackmd.io/eZ4WDTPGSaisETRy_X8XTw)

* API
* 資料流
* axios

### 套件
* [ANTD](https://ant.design/components/overview/)
* [PrimeReact](https://www.primefaces.org/primereact/setup/)
* [Mantine](https://mantine.dev/getting-started/)
* [Bootstrap](https://react-bootstrap.github.io/components/alerts)
* [leaflet](https://react-leaflet.js.org/)

參考網站：
* [3-2 使用 Create React App 工具建立專案](https://pjchender.dev/react-bootcamp/docs/book/ch3/3-2/)
* [React Redux & Redux-thunk](https://ithelp.ithome.com.tw/articles/10334652)