IT專才培訓 - 技術與學術兼備
每課均根據完整約 2.5 小時課堂逐字稿整理，展示實際摘要、時間章節及測驗題目。
本課程主要介紹 React Native 跨平台手機應用程式（Hybrid Apps）的基礎開發流程與環境建置。課程一開始，導師帶領學員安裝必備的開發工具，包含執行環境 Node.js、用於建立專案的 Expo CLI、程式碼編輯器 VS Code 以及提供手機模擬器的 Android Studio。完成安裝後，導師示範如何使用 Windows 命令提示字元 (CMD) 建立資料夾，並透過 npx create-expo-app 指令搭配 JavaScript 模板來初始化 React Native 專案。接著，課程進入實作階段，講解 App.js 的核心結構，包括如何匯入 View、Text、Button 與 Image 等內建組件。學員學習了如何使用 StyleSheet.create 定義與套用樣式，並深入探討 Flexbox 排版技巧，如 justifyContent、alignItems 以及外距 (margin) 與內距 (padding) 的設定。在互動功能方面，課程重點介紹了 React 的狀態管理概念，示範如何透過 useState Hook 宣告狀態變數與更新函數，配合按鈕的 onPress 事件來動態改變畫面內容。最後，導師演練了如何透過 require 語法載入本地端圖片資源，讓學員完整體驗從環境設置到基礎介面與互動開發的完整過程。
介紹 React Native 是一個跨平台開發軟件，並說明混合式應用程式的基本概念。
比較 Expo 與 React Native Command Line 的差異，並建議新手使用 Expo 建立環境。
總結課程前段安裝的 Node.js、Expo CLI、VS Code 與 Android Studio 等四個主要工具。
使用 npx create-expo-app 指令在命令提示字元中建立全新的 React Native 專案資料夾。
輸入 npm run web 啟動本地伺服器，並於瀏覽器上即時預覽應用程式畫面。
介紹 React Native 的核心入口檔案 App.js，包含引入函式庫與輸出主程式結構。
學習如何宣告樣式表，並透過 style 屬性將文字大小與背景顏色等設定套用到組件上。
講解 justifyContent 與 alignItems 如何分別控制元件在垂直主軸與水平交錯軸的對齊。
實際測試 flex-start、center 與 flex-end 屬性對於畫面元件上、中、下位置的影響。
說明 margin (外部邊距) 與 padding (內部填充) 在元件排版與撐開空間時的作用與差異。
示範 space-between、space-around 與 space-evenly 在多個元件時如何自動分配剩餘空間。
在畫面上加入 Button 組件，並設定 onPress 事件來觸發按下按鈕後的互動反應。
解釋為何單純修改一般變數無法讓畫面跟著變動，帶入 React 狀態變數的核心設計邏輯。
實作 useState 掛鉤，宣告狀態變數與 setter 函數，讓按鈕點擊後能即時更新畫面文字。
示範如何匯入 Image 元件，並正確使用 require 語法將專案內的本地圖片載入至應用程式中。
本節課為 React Native 開發的第二堂課，主要講解了 React Native 與 Android 開發的差異，強調其純程式碼的特性。課堂從建立 Expo 專案開始，教授如何使用 create-expo-app 指令建立專案，並透過 npm 啟動網頁與模擬器測試。隨後深入探討 Component 的核心概念，示範如何建立自訂元件，並運用 View、Text、Image 及 Button 等內建元件建構介面。課程詳細解說了 Props 的傳遞與解構機制，展示如何將文字、圖片路徑甚至是外部函式由父元件動態傳遞給子元件。接著，講師介紹了 useState 狀態變數的應用，透過三元運算子實作動態渲染，讓使用者點擊按鈕即可切換不同元件的顯示。課程後半段更進一步探討資料陣列的處理，示範利用 map 函式將陣列資料迴圈輸出成多個元件，並點出動態組合 require 圖片路徑時容易遇到的編譯錯誤。最後總結本堂學習要點並簡介了未來將學習的 FlatList 概念，為下一堂課串接資料庫與換頁功能打下基礎。
介紹 React Native 純程式碼特性，並開始學習使用指令建立專案環境。
講解如何使用指令啟動 Web 伺服器並安裝 React Native Web 所需的相關套件。
示範如何建立自訂 Component，並學習匯入與匯出模組的語法。
引導將網路下載的圖片存放至專案的 asset 資料夾以便後續使用。
介紹如何使用 Image 元件，並透過 require 語法將本機圖片顯示於畫面上。
講解元件如何透過 Props 接收外部傳入的參數，使內容能根據參數改變。
示範在元件中加入 Button，並學習如何將父元件的函式傳遞給子元件觸發。
開啟新的 Expo 專案，為學習更進階的排版與動態渲染做準備。
示範如何啟動 Android 模擬器，並說明實體手機使用 Expo Go 測試的方法。
說明如何透過三元運算子與條件判斷，讓畫面根據不同情況顯示不同元件。
學習使用 React 的 useState Hook，建立可改變元件狀態的變數。
完成點擊按鈕即可更改狀態變數，進而動態切換畫面上顯示的貓狗元件。
再次建立新專案，準備講解如何將陣列資料轉換為列表元件。
詳細示範如何利用 JavaScript 的 map 函式，將陣列內的文字資料逐一渲染至畫面。
總結本日學習的 Component、Props、State 等核心觀念，並預告下一堂課將串接資料庫。
本堂課為 React Native 課程的第三課，主要教授多個核心開發概念與實用技巧以取代純手動編碼的傳統作法。課程首先複習如何建立專案與指令操作，並深入講解 Component（組件）的概念，特別是父子組件之間的資料傳遞（Props），包括傳遞變數與函數，並示範了如何透過子組件呼叫父組件的函數來實現資料反向傳遞與解構賦值 (Destructuring) 的寫法。接著，課程引入了 FlatList 組件的使用方法，說明其優於傳統列表的渲染效能，並實作了 data、renderItem 與 keyExtractor 三個核心屬性。隨後，課程結合網路請求 fetch API 與 React Hooks（useState 與 useEffect），示範如何從遠端 API 獲取 JSON 資料並動態顯示於列表中，詳細解釋了非同步操作與狀態管理（副作用及依賴陣列）的結合運用。最後，課程探討了多頁面切換的實作邏輯，展示如何透過狀態變數與條件渲染來控制頁面的顯示與隱藏，達到動態載入組件的效果。雖然課程中實作手動轉頁時遇到了一些資料傳遞的困難，但講師也預告下一堂課將會引入 useNavigation 導航套件，為後續的應用開發奠定重要的基礎理解。
回顧如何開啟命令提示字元並使用 npx create-expo-app 指令建立空白專案。
講解如何建立獨立的子組件，並將其引入到主程式中渲染顯示。
示範如何將變數及 JavaScript 函數透過 Props 傳遞給子組件，並讓子組件呼叫。
介紹在接收 Props 時使用解構賦值語法，直接提取出需要的變數與函數。
講解類似 Android RecyclerView 的 FlatList 組件，並說明其基礎渲染屬性設定。
使用 JavaScript 內建的 fetch 函數發送網路請求，並取得 JSON 格式的資料。
把網路上獲取的資料存入狀態變數，並綁定為 FlatList 的 data 屬性進行渲染。
解釋 useEffect 第二個參數 (Dependency Array) 的功能，如何根據變數變化觸發函數。
說明在單一畫面 App 中實現多頁面切換效果的重要觀念與基本做法。
示範透過判斷 currentPage 的狀態值，使用三元運算子決定渲染哪個 Component。
在頁面中加入 TextInput 組件，並設定預設顯示文字 (placeholder)。
說明 TextInput 必須配合 value 與 onChangeText 屬性，才能持續更新狀態變數。
嘗試實作按下按鈕後將表單資料從第一版傳回父組件，再轉至第二版顯示的流程。
總結手動設計轉頁機制的困難點，預告後續將使用 useNavigation 套件簡化開發。
本節 React Native 課程主要教授如何結合 AI 工具來加速開發流程，並深入探討應用程式的導航機制、資料管理以及表單處理。課程前半段，導師指導學生建立及清理 Expo 專案，示範傳統透過父組件傳遞函數與狀態來切換頁面的方法，隨後引入更強大的 React Navigation，涵蓋堆疊導航 (Stack Navigation)、抽屜導航 (Drawer Navigation) 以及底部標籤導航 (Bottom Tab Navigation)。接著，課程介紹了如何使用 FlatList 元件來渲染清單，以及如何透過 fetch 從 JSON Placeholder 獲取遠端資料。在本地端資料儲存方面，導師詳細講解了 AsyncStorage 的實作方法，示範將使用者輸入的表單資料轉換為字串後儲存並在需要時讀取，也能在瀏覽器開發者工具中檢視。課程後段的實作環節包含一個具備 CRUD 功能的待辦事項 (To-Do List) 應用程式，並處理了複雜的表單控制項與刪除確認彈出視窗 (Modal Dialog)。最後，導師簡介如何使用 Expo Application Services (EAS) 將應用程式打包並部署上傳至雲端，以便在實體手機或模擬器上進行測試與安裝。
回顧上一節課的專案並使用命令提示字元準備開發環境與資料夾。
示範如何下達指令建立全新的 Expo 專案並啟動網頁伺服器進行測試。
透過提示詞要求 AI 生成不含導航套件的兩個基本頁面以了解資料傳遞原理。
安裝 React Navigation 套件並使用堆疊導航來實現頁面切換與參數傳遞。
透過 AI 生成 FlatList 結構，展示如何將陣列資料渲染為可點擊的清單。
結合 useEffect 從 JSON Placeholder 獲取遠端資料並更新至清單狀態中。
安裝 AsyncStorage 並示範如何將使用者的輸入資料轉為字串後存入本地端。
教導如何開啟瀏覽器的開發者工具，在 Local Storage 標籤中確認儲存的資料。
重新建立專案並匯入抽屜式導航套件，製作可以從側邊滑出的導航選單。
加入單選按鈕 (Radio Button) 與下拉選單 (Picker) 等表單控制項來收集使用者資料。
處理第三方單選按鈕產生的問題，並改用更為穩定的 Picker 控制項替代。
介紹 Bottom Tab Navigation，在應用程式下方加入分頁切換按鈕。
利用狀態管理與陣列展開運算子實作待辦事項的新增、讀取、更新與刪除功能。
加入刪除確認的 Modal Dialog Box，並設定編輯模式的切換與取消機制。
介紹 Expo Application Services，安裝 EAS CLI 並將應用程式打包上傳至雲端提供下載。
以下試學片段直接取自本課程的證書介紹頁，方便報讀前了解實際教學內容。
Copyright © 2025 Unisoft Education Centre. All Rights Reserved
