今天是鐵人賽 Day10，目標是讓 React 前端串接後端商品 API，並在首頁顯示商品清單。以求能看到真實資料呈現在網頁上，對整個專案流程非常重要。

1️⃣ 建立 Home 頁面與抓取 API
在 src/pages/Home.jsx 建立 Home component，利用 useEffect 抓取後端 /api/products 資料，並用 useState 管理商品、載入與錯誤狀態。

import { useEffect, useState } from "react";
import axios from "axios";

export default function Home() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const res = await axios.get("http://localhost:3000/api/products");
        setProducts(res.data);
      } catch (err) {
        console.error("❌ API 錯誤：", err);
        setError("載入失敗，請稍後再試！");
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  if (loading) return <p className="text-gray-500 text-center mt-10">載入中...</p>;
  if (error) return <p className="text-red-500 text-center mt-10">{error}</p>;

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">商品清單</h1>
      <ul className="space-y-2">
        {products.map((p) => (
          <li key={p._id} className="border p-4 rounded shadow hover:shadow-lg transition">
            <p className="font-semibold">{p.name}</p>
            <p className="text-gray-600">價格：${p.price}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

2️⃣ 啟動前後端
後端：npx nodemon index.js，確認 http://localhost:3000/api/products 可抓到 JSON。

前端：npm run dev，看到首頁商品清單。

🐛 遇到的問題
載入失敗：原因是 API 未啟動或網址錯誤，確認後端運行、網址正確即可。
CORS 問題：前後端不同埠號需在後端加上 cors 中介軟體。
React 載入中一直停住：沒有設定 loading 與 error 狀態會導致無法反映。

💡 Day10 收穫

• 成功串接前後端，首頁顯示真實商品清單
• 學會 useEffect + axios 抓 API
• 建立載入中與錯誤提示處理
• 體驗前端與後端整合流程（Full Stack 的初步實作）