下面給你一份 超簡單、最快速上手的 React 入門指南（基於最新 React 18 和 Vite 環境），保證你 5 分鐘跑起項目！

🚀 一、React 怎麼安裝？

React 有兩種常見安裝方式：

✅ 方式 1：使用 Vite 創建 React 項目（推薦，最快最乾淨）

這是目前前端社區最推薦的方式，比 create-react-app 快幾十倍！

1. 安裝 Node.js（如果還沒安裝）

去官網下載 LTS 版本 https://nodejs.org

安裝後確認版本：

node -v
npm -v

2. 使用 Vite 創建 React 項目

npm create vite@latest my-react-app --template react

或使用 TypeScript：

npm create vite@latest my-react-app --template react-ts

3. 進入項目並安裝依賴

cd my-react-app
npm install

4. 啓動項目

npm run dev

瀏覽器打開地址，例如：

http://localhost:5173/

🎉 恭喜！React 18 + Vite 項目成功運行！

✅ 方式 2：直接在 HTML 中使用 React（無需構建工具）

適合快速 demo：

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
  const App = () => React.createElement("h1", null, "Hello React!");
  ReactDOM.createRoot(document.getElementById("root")).render(App());
</script>

🧩 二、React 快速入門：創建第一個組件

在 src/App.jsx 寫一個簡單組件：

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>你已經跑起第一個 React 項目了！</p>
    </div>
  );
}

export default App;

頁面會自動刷新。

📌 三、最簡單的狀態管理（useState）

編輯 App.jsx：

import { useState } from "react";

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

  return (
    <div>
      <h1>計數器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default App;

🔌 四、最簡單的接口請求（useEffect + fetch）

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.github.com/repos/facebook/react")
      .then((res) => res.json())
      .then((json) => setData(json));
  }, []);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

export default App;

🎯 總結

內容

命令或説明

創建項目

npm create vite@latest my-react-app --template react

安裝依賴

npm install

啓動項目

npm run dev

入口文件

src/main.jsx

核心概念

組件、props、state、hooks

如果你需要，我可以繼續幫你：

✅ 配置 Ant Design ✅ 配置 React Router ✅ 配置 Zustand / Redux ✅ 接口請求封裝（axios） ✅ 生成 SPA / 部署 Nginx

react 安裝與快速入門_json