跨平台 APP - React Native 快速學習攻略

持續更新：

• 2026/10: 版本以 Expo SDK 57 的 JavaScript blank 專案為準，入口仍是 App.js，也更新範例程式碼供大家下載喔！

你想快速從 0 到 1 製作出雙平台APP嗎？想使用最新APP技術開發，卻不知道該怎麼入手嗎？是不是曾經想學app，甚至學app時從入門到放棄？

六年前，我也開始學習開發 app 的旅程，走了不少彎路，但後來掌握了學習和開發技巧，並再次遵循自己總結出的學習技巧，結果：一個月內學會跨平台程式語言，三個月內快速從 0 到 1 開發多個 app，最終上架到 app store 和 android 雙平台，並建立影響力且打造歸納的 app 學習技巧，找到第一份跨平台 app 工程師職缺！

在過程中我也犯錯了很多錯誤，也踩過很多的坑，所以我想和你分享我的自學 app 經驗歷程和歸納出的方法。希望可以支持和我一樣想做出自己 app 甚至轉職找到 app 工程師工作的朋友，幫助你少走彎路，不需要像我當初那樣盲人摸象。

在 APP 學習與創造之路，讓你從 0 開始，教你如何跨越程式高牆，擁有編寫程式的能力，做出各式各樣的 APP。

搶先看【直播】React Native 介紹和 State 教學 ＆ 自學經驗分享

此直播教學，是線上付費級的 79 分鐘直播視頻教學，從QA問題講解、RN 基礎、到自學經驗分享，無私公開和大家分享！

教你如何透過一個個事件帶給你成就感，和前進的動力！

透過不同專案給大家模仿和練習，也就是不斷地輸入輸出的過程，累積實力，提升你的戰鬥力！

本課程適合

• 時間不多，想短時間內入門創造 APP 的你
• 想入門開發 APP，卻不知道如何開始的你
• 看了一堆技術文件、課程都還是抓不到方法的你
• 學過 Javascript 或是 react，想上手寫 APP 的你
• 給身為網站工程師，想跨平台到 APP 的你
• 想轉職成為 APP 工程師，認識最新 APP 技術的你

但如果你是以下的人，建議你可以省下你的課程費用 ...

• 已經懂得在短時間內，快速開發
• 自學速度很快，做過很多程式專案
• 希望能從這堂課學習後端程式與後台建立

破解程式開發迷思

v 透過『實戰』方式，教你在職場上『必學』也『一定會應用到』的必備核心技能

v 統整必要重點，讓你快速上手，做出各種專案！

v 幫助你，如何透過搜尋自己要的功能技巧， 而不會只侷限在課程上所學到的app!

408 分鐘完整學習規劃

v 統整三大核心章節

v 牛刀小試、專案時間、程式碼下載、逐一功能講解、搜尋步驟歸納等高效步驟

v 職場必備教材、直接提升開發程式實力

相信，很多事情不是不可能，而是要知道「方法」是什麼。

幫你破解程式開發迷思，從 0 到 1 幫你建立堅強實力、帶你跨越科系限制！

這門課程從入門到進階，幫助你累積帶得走的技能！也能製作專屬自己的APP，幫助你解決更多事情！不少學員也因此在課後開發了自己想要的 APP （虛擬錢包 app、上班打卡 app、寶可夢 app、每日喝水量 app、食譜 app...等等）

幫你省了一開始接觸程式時無頭緒的窘境！省下時間，省下注意力，學習力效率更加前進！幫你解惑，一起變強💪🏻

一起使用最新APP技術，從 0 到 1 快速建立各種專案！實現自己的想法、改變世界！

一步步現場實作，帶你一步步實戰

帶領大家認識 react native 邏輯觀念外，也知道在實作時的思維是什麼。

所以每個階段都是『 現場實作 』，帶給你所有『 實戰必備的核心技術 』，用螢幕錄影的方式操作給大家看，並利用投影片講解加深實作時帶入的觀念，統整必要重點，讓你快速上手！

取得單元範例程式碼

不同階段單元的程式碼範例，都會上傳給大家，回去可以好好複習，反覆練習，更可以直接拿來做更多延伸應用功能的 APP！

牛刀小試：重點是「輸入」和「輸出」的過程

課程內容在一些重要單元，會帶著大家透過一個個不同的『 牛刀小試 』更加熟悉單元的內容。跟著課程一次次作業，累積實力，提升戰鬥力！

凡事必定「累積」

每次的「專案時間」都是階段成果且一個完整的功能。這些都是未來作品集的基石！最後會套用到這些「專案時間」實作的功能做完「一個具收藏功能的 app」。

不論是「牛刀小試」還是「專案時間」作業，實作完成後以專案程式碼方式繳交，上傳專案至 Github或是雲端都可以 ，在「作業成果」專區中有說明如何上傳和其他細節喔！

相關問題回答

我們於每週末統一回覆學員作業和問題喔！由於目前只有一位講師，較難在上課人數未定時就給大家確定的回答頻率與回答形式，還請各位同學見諒！之後會再依學員提問頻率以及人數再做調整！

但為了讓大家可以更即時的來回討論問題，我另外開課程專屬的臉書社團，可以在Hahow回覆/ 社團內/我的 FB 提問喔！

一起透過不斷地刻意練習與迭代，帶著大家踏上快樂學習的道路上，也同時累積自己帶得走的技能！

為何使用 React Native?

要創建 APP 的方式五花八門，為何選擇使用 React Native?

自學我從網頁開發開始，到寫原生 iOS APP，一直覺得「如果想法、產品或服務，只能放在一個平台，真的很可惜，受眾不夠廣。」要跨平台，就需要找人協作，或花其他時間去學習。但程式語言又變化那麼快，根本學不完！

後來從 RWD、用 React 寫 PWA、Hybrid、再到 Flutter、React Native⋯⋯等等，從「學習曲線」，到做出來的「使用者體驗」與「性能」，還有各種「資源豐富度」，各種跨平台（Cross-Platform）程式語言和框架，我都親自去嘗試過，並且快速驗證比較與腳踏實地給他踩坑，實作出 APP。發現很多不是功能受限，就是性能體驗不好。

這堂課所需的先備知識：Javascript

而現在全世界使用率最高的程式語言，Javascript 擠身到前三名之中！

Javascript 被大多數 Web 開發人員廣泛使用，除了可以做網頁（有延伸出來的網頁框架 ex: React.js），或是做APP（APP框架 ex: React Native），對於後端（ex: Node.js）或是桌面應用程式（Electron.js）都可以拿來做應用，對於套件庫來說也是最大的！

React Native 有大量社群與資源支持

(圖片來源：https://rubygarage.org/blog/react-native-for-mobile-app-development)

由 Facebook 開發的程式語言框架「React Native」 在全世界的使用率愈來愈高！ 也在各地流行的 APP 中廣泛應用，像是 Facebook、Instagram、Skype、Uber...等等 APP，性能體驗上和原生 APP 也不相上下，並且有 Stack Overflow、 GitHub、FB 等等大量社群與資源在支持，也更加成熟、活躍！

React Native 能一次創建跨平台 APP

對於 APP 開發，可以同時創建雙平台 APP，對於網頁工程師，又可實現一次三平台開發！想創業，或是有什麼想法想實現，都可以自己來！

幫你省去選擇程式語言的困難與障礙，好好專注時間、精力與金錢，跟著我來創建跨平台 APP 吧！

課程會透過實戰方式，帶給你在「職場上應用」與「實務中開發」時的必備核心技術，並統整必要重點，讓你快速上手，做出各種專案！

因此，將帶大家使用最新的 Expo CLI 方式建立專案，不用管太多 app 底層原生的部分，只要專注在程式的功能與實作上面，並直接在模擬器或安裝在手機上看成果，不會有太多環境建置等問題，幫助大家更快入門！

課程單元架構

Part1：初探 React Native 熟悉語法架構

透過帶大家建立第一個 React Native 專案，讓大家了解基本使用範例、功能與架構，並藉著許多小練習，統整必備語法寶典，並立即複習，學以致用，做出一個密碼判斷 APP。

單元 1 - React native 介紹

單元 2 - 利用 react native 快速建立 react native 專案

單元 3 - 執行 APP 到 iOS 與 Android 雙平台上

單元 4 - VSCode 常用功能介紹

單元 5 - 專案架構講解

單元 6 - 元件基本架構規則

單元 7 - 樣式語法與使用 StyleSheet 樣式管理

單元 8 - state 介紹 （用 hooks 講解 useState）

單元 9 - 必須熟悉語法寶典

單元 10 - 原生組件：TextInput 

單元 11 - 原生組件：Button 和更客製化的按鈕 (TouchableOpacity, TouchableHighlight)

單元 12 - 專案時間：利用 react native 做出一個密碼判斷 app

Part2：加強必備戰力 熟悉套件＆數據流

擁有基礎語法與架構以後，為了各式各樣功能，除了教大家可以自製元件以外，甚至能夠熟悉透過搜尋，找到你想要的功能套件，並從畫面切換、儲存工具和數據流框架，能夠思考整個專案邏輯架構，做出有 data 列表功能的 APP！

而 redux 數據流框架，這個應用在各領域的模式框架，其實就是一種思維模式，課程將帶著大家一起來破解！

單元 1 - 自製元件：State v.s  Props

單元 2 - 專案時間：套用 navigation 做各種換頁

單元 3 - 專案時間：套用 navigation 做換頁功能結合與傳值

單元 4 - 專案時間：結合自製 data 列表

單元 5 - LifeCycle ＆ Effect Hook (useEffect) 介紹

單元 6 - Storage 儲存工具＆處理資料存取與更新（結合 async await）

單元 7 - redux 數據流框架（redux-react-hook）

Part3：串接資料的能力不可或缺 熟悉串接 API 與實作

一個 APP 需要有資料源來展現資料，之後不論像是天氣、交通、旅遊等等的開放型資料，還是自己的資料庫、金流，更或是 FB、Google、Azure 各種 AI 功能⋯⋯等等的串接，都難不倒你！要展示什麼資料，都可以自己串！

單元 1 - API 介紹

單元 2 - PostMan 工具

單元 3 - 串接 API 教學 & 專案時間：Notice Cart + API

單元 4 - 專案時間：再結合 Storage 實作我的收藏 part1

單元 5 - 專案時間：再結合 Storage 實作我的收藏 part2

而不論是電商平台，或是會員登入，或是遊戲道具，又或是文章收集列表⋯⋯等等，各式各樣 APP 必會用到的「收藏功能」，我將手把手帶著大家，結合前面所學，還有 Storage 功能，一起來完成「我的收藏」APP！

課程解鎖活動

早鳥前 30 名購買的同學，抽 3 名學員，領先擁有「特別解鎖」的職涯諮詢

前三十名購買課程並完成付款的學員，將先從中抽 3 名學員，給您在自學或是職涯履歷等問題，提供 30 分鐘線上一對一聊聊 :) 抽獎名單於開課後一週內公佈！

1000%，課程解鎖： 上架 APP 到雙平台（未解鎖）

當課程募資人數超過目標人數的 1000% 時，將解鎖APP上架教學！一個跨平台 APP 的開發，最後的上架，是缺一不可的關鍵流程！不論是讓 Android APP 上架到 Google Play，還是 iOS APP 到 App Store，完整上架實作，來帶大家一起一探究竟！預計於開課後釋出課程影片。

1800%，特別解鎖：多學一個 APP 功能（未解鎖）

當課程募資人數超過目標人數的 1800% 時，我們會加錄一個 APP 專案的功能實作，而實做主題來自大家問題發問中最想要學習的主題。解鎖單元預計於開課後一個月內上傳。

請務必於付款處填妥 Email 資訊，保障自己的抽獎資格

關於講師 Avon

經過多年自學與實戰經驗的累積與收穫，在程式黑客松得過「女人迷 Hackathon 冠軍 - 智慧法律 APP」、「台科X政大 Hackathon 亞軍 - 物聯網鋼琴」、「台大 Hackathon 開放資料獎及最佳創意人氣獎 - fb 尋找手機 APP/人臉辨識 APP」等等，幸運地多次成為常勝軍。成為軟體工程師，也多年切身分享程式，不少學生也成功轉職成為 APP 工程師。

致力於程式應用的開發教學與社群

iOS/Android App 工程師，創辦 APP Girls 社群，也熱衷於社群活動，不吝於提攜新進開發者，憑藉對程式語言的學習熱情，建立一個能夠安心提問，一同攜手進入程式世界的友善開發社群。

為了要建立更好的學習循環環境

從第一年自己一人做教學，到第二年帶有興趣的人一起做教學，

到第三年，轉換成工作坊型式帶著大家，更充實地兩天就可以完成一個完整作品！

一直都在不斷嘗試和轉換，為了讓更多人更有信心、勇氣、動力，去學習、成長、變更強！

• • 2016 AppCoda專訪
  • 自學經驗分享

課程社群粉專

• 最新的課程公告與活動，都會在 程式兔CodeRabbit 喔！
• 報名課程成功的學員，也歡迎加入此粉專的「課程專屬 FB 社團」討論課程和問問題！
• 學完想要有人陪你一起卡關、解關？歡迎預約 Asha 的 1 對 1 程式陪跑，第一次諮詢免費 20 分鐘：陪跑 Portaly Avon（也叫 Asha 媽媽）

未來更多的實體聚會、免費講座和課程活動，將會持續分享和提供最棒的資訊給大家！🙂

你得到的會比你想像的多更多！💪💪💪