目前已經完成了後端開發，接著要繼續前端的開發了

我們要用於前端開發的主要工具是React，因為React官方現行已經有很完整清楚的指引(React dev)所以我們今天只快速介紹和認識它。

React是一個自由及開放原始碼的前端JavaScript函式庫(library)，用於基於UI元件建立使用者介面。React不是框架，它可以和其他函式庫或套件搭配使用，以在特定環境中渲染。例如，React Native可用來建立手機應用程式；React 360可以用來建立 VR 應用程式，它由Meta（前身為Facebook）和由個人開發者和公司組成的社群維護。

React的特點

• 元件化： React將使用者介面拆分為小型元件，每個元件負責管理自己的狀態和顯示邏輯。這種元件化的開發方式使程式碼可覆用，易於維護，並且可以快速構建複雜的使用者介面。

• 虛擬DOM（Virtual DOM）： React引入了虛擬DOM的概念，它是一個輕量級的JavaScript物件模型，表示實際DOM的簡化版本。React使用虛擬DOM來最小化實際DOM的更新次數，提高效能，並實現快速的頁面更新。
  補充資料-Virtual DOM

• 單向資料流(One-Way Data Binding)： React鼓勵單向資料流，即資料的傳遞方向是單向的，從父級元件向子級元件。這種模型使資料流更可控，易於測試，並減少了應用程式中的錯誤。
  補充資料-單向資料流

• 使用JSX(JavaScript和XML):JSX是一個 JavaScript 的語法擴充，與HTML非常相似，使用標籤（如、）和屬性（如className、onClick）來描述元件的結構和屬性。JSX最終會被編譯成普通的JavaScript程式碼，以便瀏覽器能夠理解。補充資料-JSX

//JSX
const element = <h1>你好，世界！</h1>;

• 生態系統： React擁有廣泛的生態系統，包括許多第三方套件和工具，如React Router用於路由管理，Redux用於狀態管理，以及許多UI庫和組件庫，可以擴展React的功能。

React Components和 Props

Component 使你可以將 UI 拆分成獨立且可複用的程式碼，並且專注於各別程式碼的思考。React 元件使用props來相互通訊。每個父元件都可以透過提供子元件 props 來將一些資訊傳遞給它們。

詳細範例請見Passing Props to a Component

React State

Component通常需要因互動而改變螢幕上的內容。在表單中輸入內容應更新輸入字段;單擊“購買”應將產品放入購物車中。Component需要「記住」一些東西：當前輸入值、當前購物車。在 React 中，這種特定於元件的記憶體稱為狀態(State)。
詳細範例請見State: A Component's Memory

React events

React 可讓我們為 JSX新增事件處理程式。事件處理程式是自己的函數，將在回應點擊、懸停、聚焦表單輸入等互動時觸發。
詳細範例請見Responding to Events

參考資料

• React Dev
• React 新手入門