useState 建立兩個空 array 分別存放 state 以及 setters const [state, setState] = useState(initialState); useEffect useEffect 有兩個參數，第一個參數是函式，第二個參數則是陣列。 useEffect(()=>{},[]);

什麼是Redux? Redux 是一套除了 React 外在其他框架下也可以使用的資料流管理工具，他定義了資料流的規範，彌補了 React 在元件變多後狀態難以控管的問題，並將資料集中管理，讓程式更容易去維護和測試。 action：包含更新資料的方式 action type 及更新資料時所用的值 action payload。 export const GET_ProjectInfo = (payload, callback) => { return (dispatch) => { dispatch({ type: "GET_ProjectInfo", payload: payload,

[第01堂] 前端框架 [第02堂] 安裝React環境 [第03堂] 基礎知識-元件、props、state [第04堂] Router [第05堂] Hook [第06堂] Redux [第07堂] 實作 生命週期

傳送門1 傳送門2 react-router-dom react的一個常用套件，可以幫助我們在網頁不刷新的狀況下面做到更新網址，做SPA的時候會需要用到。 現行版本為v6，和v5有蠻大的不同，開發的時候要注意一下。 ## 安裝指令 $ npm install react-router-dom BrowserRouter、HashRouter

:::info :bulb: 小複習： JSX Class & Functional Component props & state ::: JSX const show = true;

Node.js 一個JavaScript 執行環境(run-time environment)：傳送門 (下載左邊LTS版本) LTS 版本：表示這個版本會由官方長期維護，通常會持續至少 30 個月以上的問題修正。 Current 版本：當前最新的版本，雖然裡面可能會有新功能，但是這些功能最後不見得會留下來。 image NVM Node Version Manger，Node 的版本管理器，管理、切換Node版本。

# [第07堂] 實作

簡單介紹 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ image Mounting：元件被渲染到畫面上 Updating：元件的內容因為資料的更動而重新渲染 Unmounting：元件從畫面上消失，移除這個元件 <font class="red">constructor(props)</font> 在元件一開始 mount 的時候，初始化會先經過建構子 constructor，裡面放的super()，是為了使用 this 去取得實體化物件。

:::info :bulb: 小複習： Node.js：開源的 JavaScript 執行環境 NVM：Node 的版本管理器 NPM：Node 的套件管理器 NPX：一樣是Node 的套件管理器，不過用完就會刪掉。 ::: ES5/ES6

:::info :bulb: 小複習： Node.js：開源的 JavaScript 執行環境 NVM：Node 的版本管理器 NPM：Node 的套件管理器 NPX：一樣是Node 的套件管理器，不過用完就會刪掉。 ::: ES5/ES6

安裝套件 npm install react-redux npm install @reduxjs/toolkit npm install react-router-dom@5.2.0 npm install axios npm install sass npm install redux-thunk 建立.env檔 GENERATE_SOURCEMAP=false REACT_APP_ENV=development

框架的優點 降低維護難度 提升效能 前端三大框架 包含 Vue、React、Angular，三大框架之比較：傳送門 框架 介紹 優點

書本1：React&Redux Web應用程式前端高校開發技術 書本2：React 全面昇華你的FrontEnd境界(熱銷版) 書本3：React.js 頂尖開發 書本4：從Hooks開始讓你的網頁React起來 :::info :bulb: 課前確認他們在實習公司使用的技術。 ::: [第01堂] 前端框架

DOM (Document Object Model) 文件物件模型，把HTML文件的各個標籤定義成物件，這些物件最終會形成一個樹狀結構。 例： document.getElementById就是用id在向DOM取得元素 JSX JavaScript 的語法擴充，屬性名稱以小駝峰方是撰寫。 const element = <h1>你好，世界！</h1>; 上面的標籤語法不是一個字串也不是HTML。