ReactJS 前端網頁開發證書課程

介紹 React.js 用於前端開發，並說明建立其專案前須具備 Node.js 環境。

示範全域安裝 React 工具套件，並透過指令建立第一個 React 應用程式。

開啟 VS Code 認識專案檔案架構，並清理預設程式碼以撰寫最簡單的結構。

教學如何將圖片放進 public 資料夾，並使用 img 標籤顯示於網頁上。

實作 JavaScript 函式，並透過按鈕的 onClick 屬性綁定觸發事件。

示範如何在瀏覽器按 F12 打開開發人員工具，利用 console.log 觀察程式運作。

介紹 React 開發中最核心的 useState 鉤子，並說明它與普通變數的不同。

實作計數器功能，驗證狀態變數更新後能帶動網頁畫面自動更新的特性。

利用狀態變數 (Flag) 控制數值，達到點擊按鈕隱藏或顯示特定圖片的效果。

講解如何使用問號與冒號構成的三元運算子，在畫面渲染時進行條件判斷。

應用剛學到的條件渲染與狀態變數，實作按鈕點擊後可於兩張圖片間切換顯示的功能。

運用生成式 AI 輔助撰寫元件，示範如何提供精確提示語以取得所需程式碼。

準備水果陣列資料，將名稱、價格與圖片對應的檔名封裝為物件格式。

建立裝載陣列的狀態變數，撰寫函式來寫入水果資料或傳入空陣列清空資料。

課程回顧，強調先掌握 React 底層邏輯與觀念，才能正確駕馭並引導 AI 開發工具。

講師示範使用命令列建立 React 專案，並指導下載安裝 XAMPP 伺服器軟體。

在 C:/xampp/htdocs 資料夾下建立基本的 HTML 靜態網頁並插入圖片元素。

學習設定網頁背景顏色、字體大小、圖片邊框以及使用浮動屬性製作文字紋繞圖效果。

利用無序清單與超連結標籤，實作不同網頁間跳轉的導覽列菜單。

將分散的行內樣式集中至 Style.css 檔案中，並在 HTML 檔頭進行外部引入，方便統一管理風格。

清理 React 專案預設程式碼，並在 React 中套用自定義的 className 與 CSS 檔案。

不再手動逐行撰寫 HTML，改用陣列結合 .map() 方法迴圈渲染出動態名單。

利用 React 的 useState 宣告狀態變數，綁定按鈕點擊事件以切換 true 與 false 狀態。

透過三元運算子與狀態變數，依據條件判斷來決定畫面上區塊的顯示或隱藏。

將簡單的字串陣列改為包含姓名、圖片與分數的物件陣列，並建立 HTML 表格結構來呈現。

將動態資料綁定至表格的欄位中，並解決圖片路徑的正確讀取方式。

示範如何向 AI 工具提供指令，快速獲取現代化的表格與按鈕樣式，並貼入 CSS 檔案中。

執行 npm build 將 React 專案打包，並將生成的靜態檔案複製至 htdocs 資料夾供 Apache 伺服器運行。

初始化新的 Node.js 專案並安裝 Express 與 Nodemon，編寫伺服器腳本提供 API 介面。

在 React 端使用 useEffect 在組件載入時向後端發送 fetch 請求，並在後端安裝 cors 套件以解決跨網域限制。

導師示範使用 npx create-react-app 指令建立名為 test3 的全新 React 專案。

講解 Component 必須包含的 Import、Body 與 Export 三部分，以及 JSX 語法的基本應用。

介紹如何匯入與宣告 useState，並利用狀態變數即時控制網頁畫面的改變。

在 app.js 中建立基本的註冊表單結構，並將樣式屬性綁定到 app.css 以將元件置中。

示範如何利用 onChange 事件擷取輸入框的值，並自動更新至對應的 State 中。

教導學員透過 map 函數將 State 陣列中的使用者資料動態轉換成 Table Row 渲染至畫面上。

介紹從 map 中取得陣列索引值，並透過 splice 函數刪除特定位置的使用者資料。

實作點擊 Update 按鈕後，將選定使用者的資料反向填入輸入框內的機制。

為了共用 Save 按鈕，使用一個變數旗標 (Flag) 來判斷當下是執行新增資料還是更新資料的動作。

宣告一個 updateIndex 狀態，確保在更新模式下系統能記住哪一筆陣列索引正在被修改。

為了解決程式碼過於肥大的問題，建立 UserForm 與 UserTable 兩個獨立的組件檔案。

將 app.js 中的表單及表格程式碼，分別剪下並貼入對應的新組件之中，進行介面分離。

學習將父組件 (app.js) 的狀態變數與處理函式，當作 Props 傳遞給子組件使用。

透過終端機指令安裝 react-router-dom，準備實作 React 專案的路由切換功能。

使用 BrowserRouter 與 Routes 定義多條路徑，並透過 Link 標籤實現動態導覽跳頁。

回顧上堂課內容並使用 create-react-app 指令建立名為 Test4 的新專案。

示範安裝 react-router-dom 與 react-bootstrap 套件以支援路由跳轉及美化頁面。

利用 AI 工具生成單頁應用程式所需的 Home, About Us, Contact Us, Products 四個基本元件。

在 app.js 中引入路由元件，並利用 path 與 element 屬性連結網址路徑與自訂頁面。

將背景圖片放入 public 資料夾中，並於首頁元件透過相對路徑直接載入呈現畫面。

實作聯絡表單功能，使用 useState 來儲存並更新使用者的名稱、電話與電郵資料。

在產品清單頁面中，利用 map 函數將產品陣列資料動態渲染成表格，並插入網路圖庫連結測試。

在專案中全面導入 React Bootstrap 語法，加入 Container 等容器並在 index.js 引入 CSS 樣式檔案。

將原本簡單的文字連結替換為 Bootstrap 的 Navbar 組件，實作響應式導覽選單。

在產品清單加入按鈕，並利用 useNavigate Hook 撰寫按鈕點擊後控制畫面跳轉至詳情頁的功能。

透過 useParams 抓取網址上的產品 ID，並將產品資料的狀態提升至 app.js 以便跨元件共享資料。

開啟另一個專案資料夾撰寫 Node.js 與 Express 伺服器程式碼，提供 JSON 格式的產品 API。

在 React 專案中加入 useEffect Hook，使得網頁載入時能自動從後端伺服器取得產品資料。

開啟 XAMPP 伺服器，將 React 執行 npm run build 打包後的靜態檔案放置於 htdocs 中進行部署。

將 public 中的圖片轉移至 src/assets 目錄下並透過 import 語法載入，以修正編譯部署後圖片無法顯示的問題。