React
React
2021/08/03
簡介
React 是一個專注於 UI（View）的 JavaScript 函式庫（Library），利用純JavaScript在前端產生HTML(而不是由後端產生)。React並沒有提供css及對應的js，所以，還是需要採用如Material-UI、Bootstrap或Semantic-UI的UI架構。
基本概念
在php裡，是利用把php語法鑲嵌在html裡，如:
My first PHP script!<p>
Today is <?php echo date("Y/m/d") ?><br>
但是，在javascript裡，類似的動作，就必須透過getElementById去改變內容。這樣的好處是，靜態html與動態的內容是完全分離的。
<!DOCTYPE html>
<html>
<body>
My first javascript</p>
Today is <div id="demo"></div><br>
</body>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</html>
JSX
在react裡，基本上就是利用javascript產生網頁，在不使用JSX的情況下，可以像javascript一樣利用createElement等指令產生html的內容，利用getElementById等指令去取得html的內容。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
React.createElement('h1', {}, 'Hello, world'),
document.getElementById('root')
);
然而，這樣的寫法實在不容易寫，所以，就會希望有類似php的寫法，這時候，JSX就產生了，簡單的說就是將類似HTML語法的內容轉為javascript。同樣的內容就可以寫成:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!!!</h1>,
document.getElementById('root')
);
元件
雖然javascript可以模組化 (詳參: 模組系統 )，可是，無法和html一起模組化。採用react有個好處是可以將網頁內容(事實上是JSX)模組化，稱之為元件。
React的元件有兩種形式，過去是以Class Component的方式開發，在react 16.8之後，新增了React Hooks，也因為Functional Component相對精簡，使得Functional Component的開發方式成為主要的選項。在Functional Component中為了要能使用Class Component裡的state變數，Functional Component中利用React Hooks中的useState，來存取state變數。
Routing
基本上，react只會有單一的入口，也就是一定從index.js開始執行，不像php那樣，可以直接執行任何的php檔案。所以，當我們的程式長大之後，就必須要靠router來幫忙，利用routing的概念來重導到不同的元件。有很多第三方router，現在最多人使用的就是react router。
Context
在react裡，元件跟元件之間的state變數是獨立的，Parent元件可透過props傳遞資料到Child元件，然而，如果要一層一層的傳遞，傳遞的過程會變得很複雜，所以，在react 16.3開始提供context api，在16.8更進一步提供useContext，讓context的使用變得更容易了。
React Native
React Native是架構在react之上，所以，使用的是react的語法，不同之處是，react native提供了內建的UI元件，不需要使用Material-UI或Bootstrap元件。其他的概念就與react是相同的。
開發環境
由於是開發手機，開發環境就比react複雜一點。就初學者而言，會使用expo。使用expo的好處是，不需要安裝android studio或XCode，直接下載Expo Go app，就可以看到react native的執行結果，當然，要安裝android studio或XCode也可以。
Expo的使用有兩種模式: Managed workflow及Bare workflow (詳參: Workflows )，簡單的說，Managed workflow就是完全依靠expo來開發，所以，完全不需要安裝android studio或XCode，也不需要針對兩個環境分別進行設定，優點是簡單。缺點是如果我們想使用Android或iOS元件，就無法使用，另外，也要注意使用的react native元件是否與expo相容，如果不相容就無法使用 (詳參: Limitations )。
React Navigation
跟react一樣，react native並沒有提供routing，不太一樣的是，一般不會在react native使用react router，而是採用navigation元件，而目前最多人使用的就是react navigation。