學習資源 作者: HiSKIO

React Native入門指南

學完 JavaScript 覺得空虛寂寞冷？那就用它來寫APP吧！

「只需學習一次，到處皆可執行」Learn Once, Run Anywhere。許多創業者在開始建構自己的App時都想用較簡單的方式進入Android與iOS市場，卻又不想耗時間學習兩種程式語言。如果你也是這群人的其中一員，那麼React Native可以幫助你用JavaScrigmpt ，打造出跟原生一樣的 App。說到這裡，你也許會想React Native究竟是從哪裡冒出來的框架？學習它又可以為你帶來什麼樣的優勢和風險？就讓我們一步一步地為大家抽絲剝繭地解釋吧！

React Native 是什麼？

React Native 是 Facebook 在 2015 年開發的平台開發框架，它最大的優勢是可以讓開發者透過 JavaScript 在 Android 和 iOS 上開發應用程式。React Native 也因不同人的需要，開發了多種使用方法。如果你擁有 Xcode 或 Android Studio 就可以下載 React Native CLI 進行操作，要是你想先試試水也可以直接搜索 Expo tools 選擇 Snack 就可在瀏覽器上對 React Native 進行實際操作。

React Native vs Flutter

提起 React Native 就不可不提它的競爭對手 Flutter。
Flutter 是 Google 在 2017 年推出的 UI 框架，可以快速在 iOS 和 Android 上構建高質量的原生用户界面。由於功能相似，這兩種框架的可比性非常高，以下就讓我們看看 Flutter 和 React Native 的差別吧。

React NativeFlutter
知名度與普及度 – 由於程式建立時間較早，普及度 相對較高 擁有 65k GitHub stars
– 使用 JavaScript 作為程式編碼， 曾經接觸前端的開發者可以很容 易切換到 React Native 		– 由於程式建立時間較新，相對來 說比較不完善因此普及度也較低
– 擁有 30k GitHub stars
使用較新的 Dart 為編碼，- 需要開發者學習這類語言才可以使用 Flutter
社團– React Native 在台灣擁有較多的 社團，這意味著開發者有著更多 的途徑學習該程式，遇到學習問 題也可以輕鬆找到解決方法 – 相比起 React Native, Flutter 在台灣並沒有太多的粉絲專頁及社 團，如果遇到學習問題也許要參 考國外教學
性能
– 同時支持 IOS 和 Android
擁有原生用戶和優良的 UI 體驗
– 不可重用代碼 		– 同時支持 IOS 和 Android
擁有原生用戶和優良的 UI 體驗
– 可以重用代碼
開發體驗– React Native 在大部分情況之下 會使用第三方庫供用戶更多選擇
– Bridge 也許會讓程式在切換畫面 時出現短暫“灰屏” 影響用戶體 驗 		– Flutter 自帶組建庫，所以組件相 對來說會有較少選擇
– 程式較新開發體驗無法做到完全完善

誰在用 React Native? 誰在用Flutter?

React Native 打造了許多我們日常會使用的 App，如 Facebook、Instagram、Uber、Uber Eats、Airbnb 和 Skype 可見他的普及度是不容小覷的。相對來說 Flutter 雖然沒有建造那麼多台 灣用戶常用的 App 但也建造了阿里巴巴、騰訊、和 Google 的相關 App。


圖源: https://www.icoderzsolutions.com/blog/wp-content/uploads/2018/07/1.jpg

React Native的優點與風險

還在猶豫不決嗎？那我們就繼續深入談談 React Native 的優點與風險吧！

+ PLUS

React Native 擁有本地框架 （如： Swift, Ionic, Cordova）沒有的 Hot Reloading，本地程式開發者經常需要等幾分鐘才可以把一個很小的 UI 改變反映到正在運行的 App 上，但 Hot Reloading 使 React Native 可以立刻在模擬上看到每一個改變，省去許多不必要的時間。React Native 的優點不止步於此，React Native 以 JavaScript 作為框架的基本語言讓有熟悉前端操作的人更容易學習程式製作可以說是 App 入門的首選。最後，React Native 使用 Redux 和 Mobx 作狀態 管理(State Management) 讓 App 裡的資訊流動的更順暢。

– MINUS

React Native 雖然帶來極好的用戶體驗，但由於它過度依賴第三方庫所以它並沒有完全的品質保證，如果第三方庫出了問題，那麼你在 React Native 建造的 App 也會跟著出現問題。另外，雖然 React Native 非常容易上手，但隨後它的學習弧是往上升的，如果你想做一些比較複雜的 App 那麼也要準備好迎接 React Native 的學習挑戰喔！

成為一名 APP 工程師 

看到這裡相信你對開發 App 這個行業感到好奇，那麼現在的 App 工程師在做什麼呢？以下我為大家總結了職務大辭典對 App 工程師的分析，幫助大家了解台灣目前對於本地的行情、薪資與工作內容。要知道 App 工程師並不僅限於 React Native 的小夥伴們，有些工程師會專注 於 Native 的 iOS 及 Android 的開發，所以要知道學會 React Native 也許只是個開始喔！

工作內容

1. 手機 APP 分析/設計、程式碼之撰寫與除錯、系統維護/操作文件產出

2. 進行軟體之測試與修改，並與現有系統銜接與整合

3. 系統測試上架申請作業

4. 團隊合作方式開發創新的產品

5. 熟悉 APP 應用程式開發的程式語言 (例如:React Native, Flutter, AJAX、ASP、NET、 C#、Web Master/Developer、jQuery、ASP.NET、swift、java..等)

6. 具備 App 效能優化及基礎維護能力

薪資行情

「職務大辭典:APP 工程師在做什麼(2018)」
https://event.1111.com.tw/careermaster/detail/140214

菜鳥 App 開發者起薪約為三萬多元但隨著年資增長，薪資也會隨著時間增幅，學習 7 到 9 年 后平均薪資平均五萬多元，可見年資穩定向上。有些小夥伴們也許會認為做十年 App 也就只 有幾千塊的增幅，真的不多啊! 但以上資料僅展現台灣地區的薪資，如果你順利出走國外或轉 往管理階層，用 App 創業也許就不只這樣的薪資了!正所謂條條大路通羅馬，學會多一項技 能也會讓你往成功多邁進一步!

React Native 從何學起?

1. 資料搜集: 學習原生 App 還是 React Native? Flutter 還是 React Native?

讀到這裡的你其實已經對 React Native 有相對的瞭解，不過如果你想進一步使用它也許要繼續 爬文，多看看別人對它的評價，才可以設計自己的學習計畫喔! 那現在的你想要學習原生應用還是跨平台的應用呢? 選擇了跨平台應用的你，又會選擇 React Native 還是 Flutter 呢?

2. 制定目標

你想在多長時間學習到 React Native 的基本操作? 很多人開始學習一個新 技能的時候常常因為沒有規劃好自己的時間而中途放棄，所以小編在這裡提醒大家要好好分配自己的時間並且為自己完成學習設置一個限期! 對了，還最重要的一點就是 了解自己!現在你為什麼要學習 React Native? 你是想在履歷表上多一項技能?還是公司要求你獲得這項技能?又或者你創造一個屬於自己的跨平台程式? 不同的學習初衷會讓你有不一樣的學習體驗，請務必想清楚再行動!

3. 篩選學習資源

現在有很多線上平台可以為你提供有關 React Native 的課程，方便你規劃時間也可以讓你在家輕鬆學習。小編為你整理了 React Native 的社團，官方文件和幾家提供課程的網站作為參考，來看看吧！

社群

線上課程

  • HISKIO 學習正確觀念、運作原理、必備工具、開發技巧、實作項目

React Native走起！

學習一項新技能往往需要靠學習者的毅力和堅持，目前台灣React Native的線下教學市場尚未成熟，且網路上的較為豐富。建議大家多參考大家學習React Native的經驗，從而走出自己的學習之路。記得，在學習的過程中也許會遇到困難，但只要堅持初衷、多多練習，必定可以走到更遠的地方！

Hi 找我嗎？追蹤訂閱HiSKIO

  • HiSKIO 嗨程式技能： 科技資訊文章、實用工具分享、新課程優惠領取
  • Codefree：喝一杯咖啡，輕鬆學程式！
  • HiSKIO LINE：叮咚！掌握最新資訊與優惠，現在就到 LINE 領200抵用券！
  • HiSKIO YouTube：免費實用課程、工程師經驗分享
  • 程式丼起來：不想一個人孤單寫 code ? 立即加入話題圈吧 !

資料來源

Facebook Comments