第29天決定研究一下同為本次鐵人賽題目的react!

1.React是什麼？

當我們使用純JavaScript操作DOM時，需要先選取元素 (document.querySelector)再改變內容(innerText / innerHTML)，還需要維護狀態、監聽事件，一旦畫面變得複雜，程式就會變得難以維護
於是，Facebook在2013年開源了一個前端函式庫React，目的是讓UI（使用者介面）能用組件化的方式思考與開發
React是一個建立使用者介面的JavaScript函式庫
它的核心概念有三個：
**1.組件化:**一個按鈕、一張卡片、一個頁面都可以是獨立的組件，每個組件只負責自己的邏輯與樣式
**2.宣告式:**不再需要一步步告訴瀏覽器怎麼改畫面，而是告訴React你想要的結果，它會幫你處理更新
**3.單向資料流:**資料從上層傳遞到下層（由父組件傳到子組件），可以清楚追蹤資料來源，讓狀態管理更穩定

2.React的基本結構

如果想顯示一段歡迎文字，React的寫法會像這樣：

function Welcome(props) {
  return <h1>嗨，{props.name}！</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="小明" />
      <Welcome name="小美" />
    </div>
  );
}

在這段程式中，Welcome是一個函式型組件，它接受一個參數 props（屬性），用來傳遞資料
<Welcome name="小明" />就像是客製化的HTML標籤
React會根據這些組件，動態生成畫面，並在資料更新時自動重新渲染

3.JSX：JavaScript+XML

你可能注意到上面的程式中有點特別我們在JS裡直接寫了<h1>
這不是錯誤，而是JSX的語法
JSX是React的語法糖，它允許我們用類似HTML的方式描述UI
範例：

const element = <h1>Hello, world!</h1>;

JSX會在編譯時轉換成純JavaScript
範例：

const element = React.createElement("h1", null, "Hello, world!");

因此JSX並非必要，但能讓程式碼更直觀、更好維護

3.狀態與互動

當使用者與畫面互動（例如按下按鈕），不必手動改變DOM，只要更新狀態即可
範例：

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>目前數字：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

這段程式展示了三個關鍵概念：
1.useState是React的Hook，用來儲存狀態
2.當我們呼叫setCount改變狀態時，React會自動重新渲染畫面
3.不需要手動選取元素、修改文字，讓邏輯更乾淨

4.如何開始使用 React

最簡單的入門方式是使用官方工具Create React App：

npx create-react-app my-app
cd my-app
npm start

這樣就能在http://localhost:3000/看到你的React頁面