1. 基本概念
React 的基本概念和核心功能，包括 JSX 語法、組件、props、state，以及如何在組件中使用事件處理程序。我們還將學習如何使用功能型組件和 React Hooks 來處理狀態和生命週期。

2. 內容
JSX 語法
建立 React 功能型組件
使用 props 傳遞資料
使用 state 管理組件內部狀態
事件處理
使用 React Hooks（useState 和 useEffect）

步驟 1：JSX 語法

JSX 是一種 JavaScript 語法擴展，讓你可以在 JavaScript 中書寫類似 HTML 的語法。React 使用 JSX 來描述 UI 的外觀。

開始時，我們會編輯 src/App.js，來嘗試一些 JSX 語法：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to My E-Commerce Site</h1>
      <p>This is a simple e-commerce website built with React.</p>
      <button>Click Me</button>
    </div>
  );
}

export default App;

上面的程式碼展示了如何使用 JSX 語法來建立組件，它看起來像 HTML，但實際上是 JavaScript。

步驟 2：建立 React 功能型組件

React 組件可以是功能型組件（function component）或類型組件（class component）。我們將使用功能型組件，因為它們更簡潔，且可以使用 Hooks 來實現功能。

現在，我們將建立一個新的功能型組件 Product.js，並展示如何在應用中使用它。
在 src 資料夾中建立一個新的檔案 Product.js：

import React from 'react';

function Product(props) {
  return (
    <div className="product">
      <h2>{props.name}</h2>
      <p>Price: ${props.price}</p>
    </div>
  );
}

export default Product;

2.在這個組件中，我們使用了 props 來接收外部傳遞的資料。props 是組件的輸入參數，可以用於動態傳遞數據。

3.接下來，我們將在 App.js 中使用 Product 組件：

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div>
      <h1>Welcome to My E-Commerce Site</h1>
      <Product name="Laptop" price="999" />
      <Product name="Smartphone" price="599" />
    </div>
  );
}

export default App;

這段程式碼展示了如何使用 Product 組件，並使用 props 來傳遞產品名稱和價格。

步驟 3：使用 state 管理組件內部狀態

state 是 React 組件中用來儲存內部狀態的方式。在功能型組件中，我們使用 useState Hook 來管理狀態。

我們將在 Product.js 中添加一個按鈕，讓用戶可以點擊按鈕來增加產品的數量。

編輯 Product.js，加入 useState：

import React, { useState } from 'react';

function Product(props) {
  const [quantity, setQuantity] = useState(0);

  const handleAddToCart = () => {
    setQuantity(quantity + 1);
  };

  return (
    <div className="product">
      <h2>{props.name}</h2>
      <p>Price: ${props.price}</p>
      <p>Quantity: {quantity}</p>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  );
}

export default Product;

在這個例子中，我們使用 useState 創建了一個狀態變量 quantity，並提供了一個更新狀態的函數 setQuantity。當用戶點擊 "Add to Cart" 按鈕時，我們呼叫 setQuantity 來更新數量。

步驟 4：事件處理

React 的事件處理方式與 DOM 元素的事件處理類似，但有一些語法上的不同。例如，我們使用 camelCase（駝峰式）來表示事件名稱，而不是小寫。

在前面的 Product.js 中，我們定義了 handleAddToCart 方法，並將它綁定到按鈕的 onClick 事件上。當用戶點擊按鈕時，該方法會被調用，並更新狀態。

步驟 5：使用 React Hooks

我們已經使用了 useState，現在來介紹另一個重要的 Hook：useEffect。
useEffect 用來在組件中執行副作用操作，例如資料獲取、訂閱和手動改變 DOM。

我們將使用 useEffect 在組件渲染時輸出一個消息到瀏覽器控制台：

在 Product.js 中，加入 useEffect：

import React, { useState, useEffect } from 'react';

function Product(props) {
  const [quantity, setQuantity] = useState(0);

  useEffect(() => {
    console.log(`${props.name} component mounted`);

    return () => {
      console.log(`${props.name} component unmounted`);
    };
  }, []);

  const handleAddToCart = () => {
    setQuantity(quantity + 1);
  };

  return (
    <div className="product">
      <h2>{props.name}</h2>
      <p>Price: ${props.price}</p>
      <p>Quantity: {quantity}</p>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  );
}

export default Product;

useEffect 中的回調函數會在組件第一次渲染時執行，並在組件卸載時執行返回的清理函數（在這裡是輸出一條訊息到控制台）。

總結
第二天，我們回顧了 React 的基本概念：

JSX 語法：在 JavaScript 中書寫類似 HTML 的語法
建立功能型組件：使用函數來創建可重用的組件
使用 props：將資料從父組件傳遞給子組件
使用 state：在組件內部管理狀態
事件處理：處理用戶交互事件
使用 React Hooks：用 useState 管理狀態，用 useEffect 處理副作用