# 從基礎前端談到前端框架:以React入門資源整理為例子 ###### tags: `React` `React Native` `前端框架` `學習` `筆記` ## 從靜態網頁、前端框架到應用程式 - 最基礎/陽春的網頁(web):若干個HTML (+ CSS + JavaScript)的組合到拆分 - 第三方功能的擴充:函式庫(libary)/套件(package)的出現,例如jQuery等在HTML引入"script",或是用JS"import"的(可參考NPM內容) - 前框架時代的問題:頁面之間的轉換效能與程式碼維護性 - 前後端分離(個別以專案開發維護視覺介面與伺服器資料)、MVC(Model、View、Controller)架構:讓網頁開發分工更明確也更複雜 - 前端框架的出現:如Angular(使用TypeScript)、Vue(HTML模式劃分)與React(JSX的JavaScript擴充語法) - 手機行動瀏覽需求的崛起(Mobile first):web的變形適應到native的混合 - RWD、SPA、SSR、PWA等技術概念,讓網頁與行動應用程式更為相似,能滿足更多以前原生應用程式(Native App)才能做到的 - 但因為WEB技術比起原生開發仍有侷限(例如某些功能無法在各平台實現,但原生個別可以),且開發原生應用需要使用多種語言門檻更高(如Java/Kotlin->Android、Objective-C/Swift->iOS)...... - 所以出現了主要只用JS就能開發原生應用的方案(摻在一起做成撒尿牛丸的概念?),最知名的便是React Native(簡單講就是用React.js的邏輯寫,再編譯出不同平台版本的應用程式) ## React.js與React Native的學習資源 ### React.js(優先推薦學習,需使用NPM/YARN經驗) - 直接簡潔的入門:[React中文官網](https://zh-hant.reactjs.org/docs/create-a-new-react-app.html) - 可以從官方CLI建立的示範APP開始,了解React的專案架構 - 官網也有提供詳細的中文入門教學,帶領學習者實作一個應用程式 - 近期的React專書,能較有系統且完整的學習,以下舉二本近期台灣出版且有電子借閱資源的: - [從Hooks開始, 讓你的網頁React起來](https://one.ebook.hyread.com.tw/bookDetail.jsp?id=226978) - [React思考模式:從hook入門到開發實戰](https://one.ebook.hyread.com.tw/bookDetail.jsp?id=261452) ### React Native(開發環境建置門檻偏高,且有明顯硬體要求) - 先設定開發環境:可參考RN官網或其他教學資源 - [React Native中文網(簡中)](https://reactnative.cn/docs/next/environment-setup),雖不是[官網](https://reactnative.dev/docs/environment-setup)但更新迅速,多少也值得參考 - 如果是Windows開發平台,可以參考[微軟的設定文章](https://docs.microsoft.com/zh-tw/windows/dev-environment/javascript/react-native-for-android) - 也可參考近期的中文書(這個沒電子借閱資源) - [原來跨平台開發可以這麼簡單:React Native全攻略](https://www.books.com.tw/products/0010863771?sloc=main) ### 補充:如果覺得官方文件或是專書的內容還不好理解,推薦[搜尋iT邦幫忙的文章](https://ithelp.ithome.com.tw/search),尤其是近期鐵人賽的,語言範例可能更淺顯易懂 ## 其他相關筆記整理 1. [Native到React的JavaScript「升級」整理](https://hackmd.io/@BOBYZH/H1JqsfYg9) - 整理從純JS過渡到學用React框架需要了解的概念 2. [React.js到React Native的「轉換」心得](https://hackmd.io/@BOBYZH/B1NpYzKlq) - 簡單列出以React開發APP(RN)對比WEB一些須注意的事項