• 課程時長

    15 小時 29 分

  • 課程級別

    初級

  • 授課語言

    中文

這堂課你將會學到

  • 製作出客製化的電商 App，包含商品列表、購物車、商品搜尋、PayPal 金流等核心功能
  • 使用 React Native 開發專案的好處
  • 如何用 React Native 開發完整、可上線的 App
  • React Native 相關知識＆實作技巧
  • 開發一款 App 的實際流程

章節目錄

  • 1

    第 1 章 基礎漫談

    • 單元 1 - 讓我們從基礎開始理解

    • 單元 2 - 背景概觀：Web 及 APP

    • 單元 3 - Hybrid APP 開發是什麼？

    • 單元 4 - React vs. React Native

    • 單元 5 - React Native 使用經驗談

    • 單元 6 - 總結：準備開始！
  • 2

    第 2 章 環境設定及基礎知識

    • 單元 1 - 本章概述

    • 單元 2 - React Native 官方文件概觀

    • 單元 3 - vs code 編輯器介紹

    • 單元 4 - source code 介紹

    • 單元 5 - RN 初心者的知識地圖

    • 單元 6 - JS 基礎型別 I：string/number/boolean/null/undefined

    • 單元 7 - JS 基礎型別 II : object - 複合式資料結構

    • 單元 8 - JS 基礎型別 III：array - 陣列如何使用

    • 單元 9 - JS 重要概念 I：function - Javascript 最重要的觀念

    • 單元 10 - JS 重要概念 II：loop - 流程控制

    • 單元 11 - JS 重要概念 III：promise - 異步行為控制

    • 單元 12 - React 觀念 I：JSX elements - React 內的類 html 語法

    • 單元 13 - React 觀念 II：component - 最重要的基本單元

    • 單元 14 - React 觀念 III：state and lifecycle - 動態資料及週期

    • 單元 15 - React 觀念 IV：props - 來自父元件的資料

    • 單元 16 - React Native 運作原理

    • 單元 17 - React Native 初始專案 & 說明：如何創建專案

    • 單元 18 - React Native 初始專案 & 說明：project code 框架解釋

    • 單元 19 - React Native 初始專案 & 說明：debugger 使用

    • 單元 20 - 課程程式碼 & 投影片下載
  • 3

    第 3 章 學會 Flexbox 排版技術｜實作 App 1 計算機

    • 單元 1 - 課程 APP 介紹

    • 單元 2 - 課程 APP 技術分析

    • 單元 3 - 工程師怎麼分析 Layout ?

    • 單元 4 - Flexbox 先備知識： container-items 與 parent-children

    • 單元 5 - Flexbox 核心概念 I：main axis 與 cross axis

    • 單元 6 - 設定 main-axis 對齊：justify-content

    • 單元 7 - 設定 cross-axis 對齊：align-items

    • 單元 8 - Flexbox 核心概念 II：flex-grow、flex-shrink、flex-basis

    • 單元 9 - RN 裡怎麼使用 Flexbox?

    • 單元 10 - 課程 APP 實作演練 - Flexbox APP 佈局實戰

    • 單元 11 - 課程 APP 總結
  • 4

    第 4 章 學會 RN Component｜實作 APP 2 公共設施查詢

    • 單元 1 - 課程 APP 介紹

    • 單元 2 - 課程 APP 技術分析

    • 單元 3 - 工程師常用哪些 RN component ？

    • 單元 4 - RN core component 介紹：View

    • 單元 5 - RN core component 介紹：Text

    • 單元 6 - RN core component 介紹：Image

    • 單元 7 - RN core component 介紹：ScrollView

    • 單元 8 - RN core component 介紹：StatusBar

    • 單元 9 - RN core component 介紹：SafeAreaView

    • 單元 10 - RN core component 介紹：TouchableHighlight、TouchableOpacity

    • 單元 11 - RN core component 介紹：ActivityIndicator

    • 單元 12 - RN core component 介紹： TextInput

    • 單元 13 - RN core component 介紹： Modal

    • 單元 14 - RN important component 介紹：WebView

    • 單元 15 - 課程 APP 實作概述

    • 單元 16 - 課程 APP 實作演練 I - 列表清單實作

    • 單元 17 - 課程 APP 實作演練 II - 彈跳視窗實作

    • 單元 18 - 課程 APP 總結
  • 5

    第 5 章 學會 React-Navigation｜實作 APP 3 藝文活動查詢

    • 單元 1 - 課程 APP 介紹

    • 單元 2 - 課程 APP 技術分析

    • 單元 3 - 工程師如何管理相依性 (dependency)？

    • 單元 4 - react-navigation： 介紹

    • 單元 5 - react-navigation： 安裝

    • 單元 6 - react-navigation： 建立第一個 screen

    • 單元 7 - react-navigation： 實現 screen 換頁

    • 單元 8 - react-navigation： screen 換頁，data 傳遞給下頁

    • 單元 9 - react-navigation： screen 換頁，data 傳遞給前頁

    • 單元 10 - react-navigation： screen 換頁，data 傳遞改標題

    • 單元 11 - RN core component 介紹：FlatList

    • 單元 12 - RN important API 介紹：Alert 07:27

    • 單元 13 - RN important API 介紹：Linking

    • 單元 14 - 課程 APP 實作概述

    • 單元 15 - 課程 APP 實作演練 I - 頁面創造實戰

    • 單元 16 - 課程 APP 實作演練 II - 完善細部分頁

    • 單元 17 - 課程 APP 總結
  • 6

    第 6 章 學會 RN Animation｜實作 APP 4 天氣預報生活通

    • 單元 1 - 課程 APP 介紹

    • 單元 2 - 課程 APP 技術分析

    • 單元 3 - 工程師如何掌握 RN Animation 學習要訣 ?

    • 單元 4 - RN Animation：LayoutAnimation 原理介紹

    • 單元 5 - RN Animation：LayoutAnimation 放大縮小效果實作

    • 單元 6 - RN Animation：LayoutAnimation 透明度改變效果實作

    • 單元 7 - RN Animation：Animated 原理介紹

    • 單元 8 - RN Animation：Animated 淡出淡入效果實作

    • 單元 9 - RN Animation：Animated 移動旋轉效果實作

    • 單元 10 - RN Animation：Animated 順序組成實作

    • 單元 11 - API、Restful API、URL 介紹

    • 單元 12 - JS Fetch API：實作練習

    • 單元 13 - 課程 APP 實作概述

    • 單元 14 - APP 實作演練 I - open API 資料讀取實作

    • 單元 15 - APP 實作演練 II - 動畫效果實戰

    • 單元 16 - 課程 APP 總結
  • 7

    第 7 章 上場實戰｜開發 APP 5 電子商務 HiEC

    • 單元 1 - 課程 APP 介紹

    • 單元 2 - 電商 APP 技術及架構分析

    • 單元 3 - 工程師如何規劃實作時間？

    • 單元 4 - 觀念打底：關於電商前後端的設計及架構

    • 單元 5 - RN important API 介紹：Dimensions

    • 單元 6 - RN important API 介紹：AsyncStorage

    • 單元 7 - RN advanced concept 介紹： Context

    • 單元 8 - HiEC 實作：基本 tab & screen 框架

    • 單元 9 - HiEC 實作：商品列表 tab - 清單列表設計及實作

    • 單元 10 - HiEC 實作：商品詳細 screen - 資料擺放及佈局

    • 單元 11 - HiEC 實作：我的最愛 tab

    • 單元 12 - HiEC 實作：購物車 tab

    • 單元 13 - HiEC 實作：訂單記錄 tab

    • 單元 14 - HiEC 實作：paypal 串接原理

    • 單元 15 - HiEC 實作：paypal 流程串接

    • 單元 16 - APP 上架概念及示範 - 觀念建立養成

    • 單元 17 - 課程 APP 總結
  • 8

    第 8 章 總結

    • 單元 1 - 課程結語

    • 單元 2 - 如何更進一步找到學習資源

    • 單元 3 - 如何挑選適合自己的技術

    • 單元 4 - 未來可能的課程規劃