chen
在開始之前，讓我們先來瞭解一下 React 的基本概念。React 是 Facebook 開發的一個開源的 JavaScript 庫，用於創建用戶界面。它的設計哲學是「數據驅動」和「單向資料流」，這意味著應用程序的狀態變更會導致對 UI 的更新。React 的另一個重要特點是其可重用的組件系統，這使得構建大型應用程式更加高效和維護性更好。
安裝與設置
1. 安裝 Node.js 和 npm
首先，您需要安裝 [Node.js](https://nodejs.org/en/)，它包含了運行現代前端應用所需的各種模塊和包管理器。如果您還沒有安裝 Node.js，請從官方網站下載並安裝最新版本。
2. 創建新的 React 專案
使用 `create-react-app` CLI 創建一個新的 React 應用是非常簡單的。打開終端或命令提示符，輸入以下命令：
npx create-react-app my-first-react-app
其中 `my-first-react-app` 是您的應用程序的名稱，可以根據自己的喜好更改為任何名字。
3. 啟動本地伺服器
一旦 `create-react-app` 完成了所有的配置工作，您可以通過執行以下命令啟動本地開發伺服器：
cd my-first-react-app
npm start
這將打開瀏覽器的默認網頁，展示您的應用程序的第一個屏幕——通常是空白畫布。
基礎知識
1. JSX
React 中的一項關鍵特性就是使用了稱為 JSX 的語法擴展。JSX 看起來像 HTML，但實際上它是 JavaScript 的一部分。它允許您在 JavaScript 代碼中嵌入描述 UI 結構的語句。
以下是一些基本的 JSX 示例：
const element = <div>Hello, world!</div>;
這個例子定義了一個 `
2. 組件與 props
React 中的主要概念之一是組件 (Component)，它是一段可重複使用的代碼，可以用來構造更大型的應用程序。每個組件負責處理特定的視圖部分，這樣可以使應用程式的維護和測試更加容易。
下面是一個簡單的 Component 範例：
function Welcome(props) {
return <h1>Welcome to React, {props.name}</h1>;
}
這個 `Welcome` 組件接受一個名為 `name` 的屬性 (`props`)，並且返回一條歡迎訊息。`props` 是從外部傳遞到 component 內部的值，它們決定了 component 的顯示方式。
3. state
State 是與特定 component 相關聯的資料，這些資料可能隨著時間而變化。例如，一個具有交互式表單的 component 可能需要跟蹤使用者輸入的字串或其他資料。
下面的例子演示瞭如何在 component 中使用 state：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>It is currently {this.state.date.toLocaleTimeString()}</h1>
</div>
);
}
}
這個 `Clock` class 在每次重新渲染時都會更新其內部時間。`this.state` 中的資料只可以在 component 內部訪問和使用。
生命週期方法
React 組件有一系列的生命週期方法，這些方法在不同的階段被觸發。理解這些方法有助於更好地控制和管理應用程式的行為。
這裡有一些重要的生命週期方法：
1. componentDidMount – 此方法在 component 第一次被渲染到真實的 DOM 上後立即被調用。這是進行 AJAX 請求或者初始化第三方庫的好地方。
2. shouldComponentUpdate – 這個方法是為了提高性能而設計的。如果 React 發現 props 或 state 有變化，它會自動重新渲染該 component。但是，如果沒有必要，你可以覆寫這個方法來阻止不必要的重新渲染。
3. componentWillUnmount – 這個方法在 component 從 DOM 中移除之前被調用。通常在此處清理非同步任務和其他資源。
高級主題
1. 函數式組件與 Hooks
在 React 16.8 之後引入的 Hooks 功能允許你在 function components 中使用 state 和其他來自 class components 的功能。Hooks 提供了一種在不創建類型的情況下使用 state 的方式。
以下是使用 Hooks 的簡短示例：
import React, {useState} from 'react';
function Example() {
// useState hook 接收初始值，在本例中是空字串 ''
const [value, setValue] = useState('');
return (
<div>
<p>You entered: {value}</p>
<input value={value} onChange={e => setValue(e.target.value)} />
</div>
);
}
2. Context API
Context API 提供了共享資料的方法，而不必透過直接 Prop 傳播。這對於那些需要在多個層級間共享的資料特別有用，比如 theme 或 authentication status 等。
以下是如何使用 Context API 的範例：
import React from 'react';
// 創建上下文
const ThemeContext = React.createContext('light'); // 預設值
function ThemeProvider({children}) {
const [theme, setTheme] = React.useState('dark');
return (
<ThemeContext.Provider value={{theme, setTheme}}>
{children}
</ThemeContext.Provider>
);
}
function ChildComponent({toggleTheme}) {
return (
<button onClick={toggleTheme}>Toggle Theme</button>
);
}
function ConsumerComponent() {
return <ThemeContext.Consumer>{(context) => <h3>Current theme: {context.theme}</h3>}</ThemeContext.Consumer>;
}
export {ThemeProvider, ChildComponent, ConsumerComponent};
在這個範例中，`ThemeProvider` 包裹了整個應用程式，並且在任何時候都可以通過 `setTheme()` 改變主題。`ChildComponent` 可以使用 `toggleTheme()` 來切換主題，而 `ConsumerComponent` 則可以直接取回當前的主題狀態。
結論
React 是一個非常靈活且強大的框架，適合用於各種規模的前端應用程式。本指南只是一個起點，鼓勵大家探索更多關於 React 的內容，包括最佳實踐、性能優化和更多的進階功能。記得查看官方文件以獲取最新的資訊和教程。
