# 從基礎前端談到前端框架：以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一些須注意的事項