React Native 編程課程

實體編程教學課程內容

課程簡介

本課程為三小時密集入門課程，專為希望快速進入 跨平台行動應用開發（iOS / Android） 領域的初學者所設計。React Native 是由 Meta（原 Facebook）開發的開源框架，使用 JavaScript / TypeScript 搭配 React 架構，讓開發者能以單一代碼庫同時構建 iOS 與 Android 原生 App。

課程內容將以實作為導向，學員將從環境設定、React 基礎概念到建立第一個行動應用程式開始，學習元件（Component）、屬性（Props）與狀態（State）的運作原理。課堂中並將實際操作 Expo 或 React Native CLI 平台，了解如何實現頁面設計與互動功能。完成後，學員將能獨立開發簡易的跨平台行動應用，為進一步學習 React Native 進階開發或 App 部署奠定基礎。

課程目標

1. 理解 React Native 的架構與 React 框架的關係。

2. 能建立 React Native 專案並在模擬器或手機上執行。

3. 掌握元件化思維、屬性（Props）、狀態（State）與事件管理。

4. 能撰寫簡單的介面與互動程式。

5. 為進一步開發多頁面應用、整合 API 與 App 資料存取奠定基礎。

授課對象

• 對行動應用開發（App Development）有興趣的初學者。

• 具備 HTML、CSS、JavaScript 或 React 前端基礎的開發者。

• 希望以單一代碼開發跨平台 App 的全端工程師。

• 教育訓練機構或企業內部技術研習人員。

課程大綱

第一部分：React Native 與開發環境介紹（約 40 分鐘）

• React Native 的誕生與應用領域。

• 與原生開發（Kotlin / Swift）及 Flutter 的比較。

• 安裝與設定開發環境（Node.js、Expo CLI、VS Code）。

• 專案結構解析。

• 實作練習：建立第一個 React Native App 並在模擬器執行。

第二部分：元件結構與版面設計（約 60 分鐘）

• React 元件（Component）概念。

• JSX 語法與渲染機制。

• Props 與 State 概念與範例。

• 使用常見的 UI 元件（Text、Button、View、Image）。

• Flexbox 佈局與基本樣式（StyleSheet）。

• 實作練習：設計一個含圖片與按鈕的簡易介面。

第三部分：事件控制與動態行為（約 45 分鐘）

• 處理使用者互動（onPress、TextInput、Alert）。

• 狀態更新與資料處理。

• 條件渲染與清單（FlatList、ScrollView）使用。

• 組件間資料流（Props 傳遞與狀態提升）。

• 實作練習：建立簡單「待辦事項（To-Do List）」應用程式。

第四部分：專案預覽與延伸應用（約 35 分鐘）

• App Debug 與即時預覽（Expo Go / 模擬器）。

• React Native 模組化思維與資料管理簡介。

• 圖片、字體與外部套件（如 React Navigation）簡介。

• 延伸應用：連接 API、導覽 (Navigation)、本地儲存 (AsyncStorage)。

• 實作練習：新增頁面切換與輸入表單。

課程特色

• 三小時濃縮 React Native 核心架構與應用概念。

• 實作導向課程，學員能立即體驗 App 開發流程。

• 適合前端開發者轉型跨平台開發或全端開發者入門。

• 完成後可銜接 React Native 進階課程、App 整合與實際發布。