IT專才培訓 - 技術與學術兼備
每課均根據完整約 2.5 小時課堂逐字稿整理，展示實際摘要、時間章節及測驗題目。
本課程為 React.js 的基礎入門實作教學，帶領學員從零建立前端開發環境並掌握元件化設計邏輯。課程首先釐清 React.js (前端) 與 Node.js (後端) 的差異，並實地演練如何檢查 Node 環境、安裝全域套件，以及透過指令建立全新的 React 專案。隨後，講師引導學員熟悉 VS Code 專案架構，進行基礎的程式碼清理，並實作文字與圖片的網頁渲染。接著進入核心重點，解析普通變數與 React 狀態變數 (useState) 的根本差異，讓學員理解唯有更新狀態變數，畫面才會自動重新渲染。透過計數器、圖片顯示與隱藏，以及多張圖片切換等練習，學員也熟練了 onClick 事件綁定與三元運算子的條件渲染應用。課程後半段加入了陣列與物件的資料結構觀念，學習如何運用狀態變數儲存多筆資料 (如水果清單)，並示範結合 AI 工具 (如 Poe) 快速生成精確的 React 程式碼，透過 map 函式將資料集轉換為 HTML 表格。整體課程結合了手動除錯觀念與 AI 輔助，建立起穩固的 React 程式設計邏輯。
介紹 React.js 用於前端開發，並說明建立其專案前須具備 Node.js 環境。
示範全域安裝 React 工具套件，並透過指令建立第一個 React 應用程式。
開啟 VS Code 認識專案檔案架構，並清理預設程式碼以撰寫最簡單的結構。
教學如何將圖片放進 public 資料夾，並使用 img 標籤顯示於網頁上。
實作 JavaScript 函式，並透過按鈕的 onClick 屬性綁定觸發事件。
示範如何在瀏覽器按 F12 打開開發人員工具，利用 console.log 觀察程式運作。
介紹 React 開發中最核心的 useState 鉤子，並說明它與普通變數的不同。
實作計數器功能，驗證狀態變數更新後能帶動網頁畫面自動更新的特性。
利用狀態變數 (Flag) 控制數值，達到點擊按鈕隱藏或顯示特定圖片的效果。
講解如何使用問號與冒號構成的三元運算子，在畫面渲染時進行條件判斷。
應用剛學到的條件渲染與狀態變數，實作按鈕點擊後可於兩張圖片間切換顯示的功能。
運用生成式 AI 輔助撰寫元件，示範如何提供精確提示語以取得所需程式碼。
準備水果陣列資料，將名稱、價格與圖片對應的檔名封裝為物件格式。
建立裝載陣列的狀態變數，撰寫函式來寫入水果資料或傳入空陣列清空資料。
課程回顧，強調先掌握 React 底層邏輯與觀念，才能正確駕馭並引導 AI 開發工具。
本堂課深入探討了前端網頁基礎與 React.js 的核心應用，並帶領學員完成前後端串接的完整流程。課程前半段指導學員透過 XAMPP 建立本地伺服器，將網頁檔案放置於 C:/xampp/htdocs 目錄中，並實作 HTML 靜態網頁與 CSS 樣式設計，涵蓋文字置中、內外距調整、圖片紋繞圖及外部樣式表整合等技巧。接著，課程過渡至 React.js，學員學習了使用 npx create-react-app 建立專案、透過 className 套用樣式，並利用 JavaScript 的 map 函數動態渲染陣列清單與表格資料。同時，課程詳細解說了 useState 的狀態變數控制，以實作畫面中清單的顯示與隱藏功能。最後階段，學員學習執行 npm run build 打包專案進行佈署，並進階實作 Node.js 後端環境，利用 Express 建立 API 伺服器，再於 React 前端透過 useEffect 呼叫 API 獲取資料，同時安裝 cors 套件解決跨網域請求問題，完成前後端資料互動的基礎架構。
講師示範使用命令列建立 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 套件以解決跨網域限制。
本次課程是 React.js 的第三堂課，導師帶領學員從基礎的環境建置開始，使用終端機指令建立名為 test3 的 React 專案，並深入講解 Component 的三大架構與 JSX 的語法特性。課程前半段著重於表單處理與狀態管理，示範如何運用 useState Hook 來收集使用者輸入的人名與電郵，並將資料儲存於陣列中，透過 map 函數動態渲染出使用者資料表格。課程中段詳細教學如何實作 CRUD 功能，包含利用 spread operator 與 splice 方法來新增、刪除及更新表格內的特定使用者資料。進入後半段，導師引導學員進行 Component 重構，將原本龐大的應用程式拆分為 UserForm 與 UserTable 兩個獨立的組件，並講解如何在父子組件間傳遞 props 與狀態。最後，課程介紹了 react-router-dom 套件，實作基礎的路由 (Routing) 切換，讓學員能夠打造具備動態頁面導覽功能的應用程式。
導師示範使用 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 標籤實現動態導覽跳頁。
本堂課為 React Fundamentals 的第四堂，主要教授如何使用 React 建立一個包含多個頁面的單頁應用程式 (SPA)。課程首先引導學生透過 npx create-react-app 建立專案，並安裝 react-router-dom 及 react-bootstrap 工具。接著透過 AI 輔助建立 Home、About Us、Contact Us 與 Products 四個頁面的元件結構。課程詳細示範如何在 app.js 中配置 BrowserRouter、Routes 以及 Link，實現動態路由跳轉。隨後進行各個頁面的實作，包含利用 public 資料夾載入圖片、運用 useState 綁定聯絡表單的輸入狀態，以及使用 map 函數動態渲染產品清單表格。為了增強網頁視覺效果，課程導入了 React Bootstrap，實作 Navbar 導覽列以及排版樣式。在進階應用部分，課程解說了如何實作帶有參數的產品詳情頁，並運用 useNavigate 與 useParams 來處理導航，同時示範將狀態提升 (Lifting state up) 到最高層級以達成元件間的資料共用。後端整合環節中，講師利用 Node.js 與 Express 建立後端 API 伺服器，並安裝 cors 解決跨域問題，再從 React 透過 useEffect 在頁面載入時 fetch 獲取伺服器資料。最後，課程展示如何執行編譯指令打包專案，將靜態檔案部署至 XAMPP 的 htdocs 中，並針對部署後的圖片路徑問題提出將圖片移至 src 搭配 import 的解決方案，完整串聯全端開發與部署的流程。
回顧上堂課內容並使用 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 語法載入，以修正編譯部署後圖片無法顯示的問題。
以下試學片段直接取自本課程的證書介紹頁，方便報讀前了解實際教學內容。
Copyright © 2025 Unisoft Education Centre. All Rights Reserved
