React Native 跨平台手機應用開發

有 JS 基礎就能開始!跟我們一起用 React Native 快速開發一款 iOS & Android 手機原生 App 遊戲吧! 

100 %
392 人
NT$ 3800
  • 課程水平 入門
  • 使用語言 中文
  • 章節 84
  • 時數 7小時17分
  • 80 支影片
  • 4 篇文章
  • 無限次觀看
  • 課程新增不額外收費

課程介紹

想學 「React Native」 卻找不到完整、合適的線上教學嗎?

這堂課把所有您最需要的 React Native 知識內容整合,提供完整詳盡的學習解決方案,您完全可以透過這堂課,學會 React Native 這項新技能。


用 JS 就能開發 iOS & Andorid 開發原生的手機應用程式 (App)  !

#不用重頭再學開發 APP 的新語法、環境、工具


這堂課教會您 透過 React Native 創造手機APP ,只要您 懂基礎的 JS,就可以加入學習這項技能!


    



課程跟著版本持續更新,學習有保障!

這堂課程將會隨著 React Native 版本的更新,並適時的對內容進行調整,讓您隨取即能用,完全不必擔心因為框架版本升級,課程不再適用。


什麼是 React Native ?

#React Native 是開發手機原生應用程式 (App) 的一套框架

一套以 JavaScript 開發手機原生 App 的軟體框架。使用 React Native 與 JavaScript 程式語言,同時開發 iOS 與 Android 應用程式,是目前相當受歡迎的技術!


         


除了 Facebook, Instagram 之外 Airbnb、Skype 也都在使用 React Native !


更多 React Native 案例


為何學習 React Native?

1.不用重頭學新語法,學習超快速 

JavaScript 是 React Native 的原生語言,對於有 JavaScript 程式設計經驗的前端工程師或是UI 設計師來說,學習門檻低,入門速度相當快!只需要一套觀念、技術、流程,但如果學習 Objective-C、Apple Swift 與 Android SDK(Java)的話,您就需要耗時研究三套觀念與技術。

2. 使用熱門的 React.JS,更高的開發效率 

雖然技術的選擇不能盲目的看熱門程度,但不可否認的是蓬勃的社群生態能帶來更好的開發體驗及資源。React Native 提供的熱更新 (Hot Reloading) 讓前端的開發迭代速度更快,不需要重複等待原生程式碼編譯執行,在原生程式碼不需變動的情況下,甚至可以透過 Hot Deploy 更新 App。

3. 良好的效能與原生使用體驗 

React Native 是跨平台的 原生 應用開發框架,在使用 JavaScript 進行快速開發的同時,亦能保有幾近原生的效能和使用體驗。

4. 可同時「開發」與「維護」 iOS & Andorid 兩大平台   

「Learn Once, Write Anywhere」 是 React 的精神。React 能提供「一致的觀念」與「相同的技術」,讓你不需要「學習 iOS 與 Android 二個平台的觀念與技術」,也能「開發 iOS 與 Android 的原生應用程式」。

5. 高程式碼重用率  </>

通常一個應用在不同的平台上所需實作的功能是相同的,卻因為不同平台的原生語言不同,需要分別在 iOS 和 Android 平台上各實作一次。透過 React Native 可以一次開發兩個平台,facebook 的團隊在使用 React Native 的跨平台專案開發中,達到了 85 % 的程式碼重用率,減少程式碼重複性和兩邊平台實作版本不同的機會。


學習 React Native 各種常見的困境

  1. 網路欠缺較適合「完全新手」角度出發的完整入門教學。
  2. 有開發 Web 的經驗,不熟悉手機應用開發流程,花大把時間研究,無預期成果。
  3. 不曾使用前端框架,欠缺必備知識銜接。
  4. 網路自學,似懂非懂,實際運用時腦袋一片空白。
  5. 觀念混淆、東拼西湊、吸收速度慢、瓶頸彎路超多。
  6. 學習遇到問題,Google 不到答案,英文也看不太懂 ..

五大主軸,帶您快速進入狀況

基礎知識打底、技能銜接

快速銜接 JS ES6 語法、前端框架開發的重要知識,確保對於這兩塊知識技能缺乏的學員,可以在學習 React Native 之前進入狀況。

React Native 快速入門

清楚地學習 React 的核心思想與 React Native 運作原理,同時避開初學者常見的地雷區 (OS: 避開地雷這超重要,千萬不要影響後續學習)!

各式進階開發技巧

React Native 各種元件的使用方式、提升效率技巧、Flexbox 排版規則,還有在實務開發上老師本身累積的 Know How,也將全部一次交給您!

常用開發工具、套件

這堂課使用 VS Code 為主要編輯器,同時將介紹各種 React Native 開發過程中,好用的工具與套件,讓您不用再花費時間做各種嘗試,這裡直接告訴您!

實作 - 記憶遊戲 APP

這堂課將透過帶您完成一款記憶遊戲 App,讓您融會貫通課程所學。課後能馬上開始自己的專案!


常見問答

1.ReactJS 和 React Native 是什麼關係?

兩者的原理是相同的, 都是使用 React 產生的 Virtual DOM 搭配 Renderer 來讓介面(View)進行渲染,差別在於 Web 上 ReactJS 是透過 react-dom 渲染網頁的原生組件,而 React Native 則是用 Andorid / iOS 的原生組件渲染。

2.一定要懂 React 才能上這門課嗎?

不需要,課程中會重頭開始詳細地介紹 React 這項技術,您可以在這堂課中學習 React 的基礎與應用,並獲得 利用 React Native 開發手機應用程式(APP) 的能力。

3.沒做過 App,也能上手嗎?會不會有很大的障礙呢?

React Native 有良好的 Developer Experience 評價,對於 iOS 及 Android 原生專案做了很好的初始化整合及劃分,初學者不需要特別設定就能開始進行開發,然而在實際的專案開發過程中,免不了會遇到原生平台的設定等細節問題,課程中將會告訴您初學者容易遇到的原生專案設定該如何操作,在過程中熟悉原生平台的專案特性。

4.誰不適合這堂課程?

完全不了解 JavaScript  的人,不建議修習這堂課。建議從這裏開始


關於講師 



樂於挑戰的 JavaScript 全端開發者,專注於軟體工程的開發技術,喜歡思考優雅的問題解決方法,享受其帶來的成就感,並熱衷學習新東西和參與社群交流,與朋友一同創立 React Native Taiwan 社群。


簡歷

  • 創科資訊 全端工程師 / 技術顧問
  • React Native Taiwan 社群發起人
  • 2017 逢甲大學 React Native Workshop 講師
  • 2016 / 2017 HelloJS 訓練營 React Native 講師
  • 2016 HackNTU 創新應用特優
  • 2016 CTJS Conf 講者

這堂課和其他免費、300 元國外課程有何差異?

*網路上有許多「分享」影片 或是「免費兌換」、「300元價格」的國外課程。為什麼要想學非要上這堂課程呢?


>>聽中文始終比較順暢


相比其他非母語的語言,用中文講解的課程,學起來絕對比英文課程有效率!在遇到專有名詞,或講解抽象概念時,用中文絕對是最好的選擇。


>>老師專業度與問題溝通


在 HiSKIO 上的老師,都經過嚴選而出,也都具備一定程度專業技術與教學經驗!課程內容並非隨意製作。另外,沒人可以解答問題是件很痛苦的事情!遇到問題不會用英文表達怎辦?溝通產生誤會很不方便,甚至導致您留下錯誤地理解觀念。


>>因應國內職場環境


看完課程就是要派上用場!課程會因應國內職場需求來做設計。以確保其實用性。


>>持續額外提供的價值與保障


除了精心設計的課程之外,這堂課還額外搭配直播,增加與學生之間的互動交流,加強線上課程的學習效力。而「分享」、「免費兌換」的課程的學生,自然無法享受這類的服務。


>>其他便利性


購課、退費、發票作帳、平台官方溝通...等瑣碎的重要小事,皆提供許多管道可供選擇,不用煩惱無人能協助解決問題!



課程特色

  • 從好用的開發環境建置開始,讓你更具生產力
  • 完整詳細的 React 開發思維與核心運作概念,不再累積技術債
  • 跳過 React Native 初心者時常卡關的地雷區域
  • React Native 跨平台應用開發技巧
  • 記憶遊戲 App 實例開發

適合我嗎?需要那些課程準備?

適用對象

  • 已經有 JavaScript 基礎,想嘗試手機原生應用開發
  • 想從 Web 開發進入手機原生應用開發領域
  • 已經有 React 開發 Web 經驗,想實際體驗 Learn once, write anywhere. 的開發者

工具準備

  • 一台電腦

知識準備

  • 瞭解 JS 陣列、物件、迴圈、函數、條件判斷等基礎

課程章節表

第1章

Hi, React Native
1
課程前言
2
線上試玩看看React Native吧!只要有瀏覽器就行囉
05:34
3
我的電腦可以開發 iOS / Android 嗎?
01:26
4
React Native 與其他移動設備應用開發方式的比較
04:33
5
重點整理:React Native 有哪些優勢 ?
05:17

第2章

設置開發環境
1
環境準備
02:39
2
編輯器推薦:VS Code
02:02
3
建立初始專案
04:34
4
專案架構說明
02:15
5
內建的完整開發工具:開發者選單
06:14
6
更好用的除錯工具整合
05:20
7
VS Code 套件推薦

第3章

ES6+ 常用語法簡介
1
常常聽到 ES6 ES7,它們究竟是什麼?
01:09
2
更嚴謹的 let 與 const
03:39
3
簡潔的物件解構語法
01:17
4
Arrow Function 和 function 的差異
03:10
5
import 與 export
03:54
6
Spread Operator
00:57
7
方便繼承的 class
01:36
8
非同步 Async Await - 還在 callback hell 中使用元氣彈奮鬥嗎
01:39

第4章

React 核心設計概念與運作原理
1
跨平台原生開發利器:React
01:16
2
Reconciler and Renderer
03:36
3
Virtual DOM:抽象化的虛擬層
01:31
4
One Way Data Flow - 複雜資料流的解決方案
02:40
5
Always Redraw 一律重繪
01:51
6
Reconciliation 高效的差異比對演算法
01:23
7
Thinking In React - React 應用開發的設計思想
04:17

第5章

Hello React Component!
1
介紹 Component 與 React Element
06:45
2
註冊 React 進入點
03:29
3
可嵌套的巢狀組件 - 樂高的組合堆疊
02:45
4
JSX 語法
04:55
5
JSX 的 JavaScript 表達式
05:46
6
JSX 條件判斷
09:32
7
JSX 樣式和註解
03:19

第6章

Props: Component 的屬性參數
1
Props 特性
06:26
2
透過 Props 傳遞屬性資料: 多行文字方塊範例
05:08
3
新增一個組件
03:55
4
自定義 Component 的封裝與使用 : defaultProps, propTypes
07:15

第7章

State 資料動態更新及重繪
1
資料動態更新的關鍵:State
05:52
2
setState 更新方法
06:51
3
非同步 setState 更新處理
04:19
4
受控與不受控的 Input 元件
07:08
5
React LifeCycle
08:06
6
練習:透過 LifeCycle 週期事件處理資料更新
01:32
7
實戰練習:實做一個倒數計時器
06:17

第8章

常用基本元件重點解說
1
原生組件:Image
02:20
2
原生組件:TouchableOpacity 客製化彈性更高的按鈕
02:17
3
原生組件:ScrollView 可捲動的視圖
03:20
4
原生組件:FlatList
08:46
5
原生組件:ActivityIndicator
03:01

第9章

React Native 樣式設計
1
React Native的樣式語法
02:31
2
使用 StyleSheet 進行樣式管理
03:32
3
基本樣式屬性
06:52
4
套用多個樣式物件
04:00

第10章

Layout 排版設計
1
Flexbox 排版方向介紹
03:01
2
flex 比例原則
03:40
3
justifyContent & alignItems
07:31
4
flexWrap 允許換行的堆疊
02:16
5
練習:Flexbox 練習遊戲

第11章

特定平台客製化
1
特定平台的客製化需求
01:43
2
特定平台的檔案命名
02:19
3
特定平台客製化 - Platform.OS
03:17
4
特定平台客製化 - Platform.select()
02:55

第12章

App Local Storage - 應用中的全域儲存系統
1
AsyncStorage 儲存空間
07:06
2
AsyncStorage 搭配 LifeCycle 的存取練習
06:35

第13章

第三方套件安裝使用
1
yarn 套件管理
08:51
2
react-native link 鏈接原生專案資源
08:55
3
練習:應用都少不了的 Icon 套件資源整合
13:06
4
注意事項與常見問題
05:13

第14章

Navigation 切換應用畫面
1
介紹 Navigation
11:58
2
Route Stack 的堆疊概念
06:09
3
Router 宣告
12:50
4
畫面間跳轉與資料傳遞
14:12
5
關於 Navigation UI : Tabs v.s. Drawer
03:42
6
RNRF - Tabs 使用範例
16:58
7
RNRF - Drawer 使用範例
05:43

第15章

React Native HTTP 請求
1
HTTP 請求與 fetch 使用介紹
06:31
2
為什麼 http 請求失敗 - Network iOS 原生專案設定
08:07

第16章

實戰:記憶遊戲開發
1
練習目標說明
09:36
2
範例專案
3
教學 : 範例專案架構說明
07:21
4
教學 : 首頁範例程式碼說明
09:53
5
教學 : 記憶頁面範例程式碼說明
21:51
6
教學 : 作答頁面範例程式碼說明
16:21

您將會學到的內容

  • 常用的 JavaScript ES6 重點語法
  • 深入了解 React 運作原理
  • 正確的 React 應用開發思維
  • React Native 跨平台應用開發
  • 實作一個記憶遊戲 App