一、認識 React

React 是由 Facebook 開發的構建用戶界面的 JavaScript 庫。它通過組件化的開發方式提高了 UI 復用能力，是現代前端開發的核心技術之一。

1.1 核心特點

• 基于組件：構建復雜 UI 就像搭積木。
• 虛擬 DOM：高效的 UI 更新策略。
• 單向數據流：更易于維護和調試。
• 聲明式編程：代碼更簡潔、更可預測。

---

二、快速搭建 React 項目

2.1 使用 Create React App

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

2.2 使用 Vite 創建更輕量的 React 項目

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

2.3 項目結構概覽

my-app/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── components/
├── public/
├── index.html
└── package.json

---

三、React 核心語法基礎

3.1 JSX：React 的模板語法

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

注意事項：

• 使用 className 替代 class；
• 表達式用 {} 包裹；
• 標簽必須閉合。

3.2 函數組件與 Props

function Welcome(props) {return <h1>歡迎, {props.name}</h1>;
}<Welcome name="張三" />

3.3 useState：定義響應式狀態

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<><p>當前數量：{count}</p><button onClick={() => setCount(count + 1)}>+1</button></>);
}

3.4 條件渲染

{isLogin ? <p>歡迎回來</p> : <p>請登錄</p>}

3.5 列表渲染

const users = ['Tom', 'Jerry', 'Lucy'];
<ul>{users.map((name, i) => <li key={i}>{name}</li>)}
</ul>

3.6 useEffect：副作用管理

useEffect(() => {console.log('組件已掛載');return () => {console.log('組件已卸載');};
}, []);

---

四、組件通信方式詳解

4.1 父 → 子（props）

function Child({ msg }) {return <p>{msg}</p>;
}function Parent() {return <Child msg="來自父組件" />;
}

4.2 子 → 父（回調函數）

function Child({ onSend }) {return <button onClick={() => onSend('hello')}>點擊傳值</button>;
}function Parent() {const handleMsg = (msg) => console.log(msg);return <Child onSend={handleMsg} />;
}

4.3 跨層通信：Context

const ThemeContext = createContext();function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}function Toolbar() {return <ThemedButton />;
}function ThemedButton() {const theme = useContext(ThemeContext);return <button className={theme}>按鈕</button>;
}

---

五、React Router 路由配置

5.1 安裝

npm install react-router-dom

5.2 使用 BrowserRouter 和 Routes

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></BrowserRouter>);
}

5.3 路由跳轉和傳參

<Link to="/about">跳轉到 About</Link>const navigate = useNavigate();
navigate('/about');

---

六、狀態管理（Redux Toolkit）

6.1 安裝依賴

npm install @reduxjs/toolkit react-redux

6.2 創建切片和 Store

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: (state) => state + 1}
});export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';export const store = configureStore({reducer: {counter: counterReducer}
});

6.3 在組件中使用

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';function Counter() {const count = useSelector(state => state.counter);const dispatch = useDispatch();return (<div><p>當前：{count}</p><button onClick={() => dispatch(increment())}>+1</button></div>);
}

---

七、進階技巧與性能優化

7.1 React.memo

const MyComponent = React.memo(({ value }) => {return <div>{value}</div>;
});

7.2 useCallback / useMemo

const handleClick = useCallback(() => {console.log('click');
}, []);const expensiveValue = useMemo(() => {return computeSomething();
}, [input]);

7.3 異步數據處理：React Query 示例

npm install @tanstack/react-query

import { useQuery } from '@tanstack/react-query';const { data, isLoading } = useQuery(['todos'], fetchTodos);

---

八、推薦的 React 技術棧生態

React 周邊生態繁榮，推薦以下實用庫，并結合使用場景：

8.1 網絡請求：axios + swr

axios 簡用法：

import axios from 'axios';axios.get('/api/user').then(res => {console.log(res.data);
});

swr 使用（自動緩存 + 重試）：

import useSWR from 'swr';const fetcher = url => fetch(url).then(res => res.json());function User() {const { data, error } = useSWR('/api/user', fetcher);if (error) return <div>加載失敗</div>;if (!data) return <div>加載中...</div>;return <div>用戶名: {data.name}</div>;
}

---

8.2 表單處理：react-hook-form

npm install react-hook-form

import { useForm } from 'react-hook-form';function Form() {const { register, handleSubmit } = useForm();const onSubmit = data => console.log(data);return (<form onSubmit={handleSubmit(onSubmit)}><input {...register('username')} /><input type="submit" /></form>);
}

---

8.3 狀態管理：Redux Toolkit + Zustand（更輕）

Zustand 示例：

npm install zustand

import create from 'zustand';const useStore = create(set => ({count: 0,inc: () => set(state => ({ count: state.count + 1 }))
}));function Counter() {const { count, inc } = useStore();return <button onClick={inc}>Count: {count}</button>;
}

---

8.4 動畫庫：Framer Motion

npm install framer-motion

import { motion } from 'framer-motion';<motion.div animate={{ x: 100 }} transition={{ duration: 1 }} />

---

8.5 UI 框架推薦

框架	特點
Ant Design	企業級組件，規范統一
MUI	Google Material 風格
Chakra UI	原子化、可組合性強的設計

使用 MUI 示例：

npm install @mui/material @emotion/react @emotion/styled

import Button from '@mui/material/Button';<Button variant="contained">按鈕</Button>

---

8.6 構建工具推薦

工具	特點
Vite	快速啟動，ESM 原生支持
Webpack	插件/配置豐富，老牌穩定
Parcel	零配置、快速構建

Vite 優勢：默認支持 JSX、HMR 熱更新，推薦作為主流 React 項目的構建工具。

---

九、部署與上線

9.1 構建項目

npm run build

9.2 免費部署平臺

• Vercel：https://vercel.com
• Netlify：https://netlify.com
• Github Pages：通過 gh-pages 插件

---

十、總結與學習路徑建議

React 是現代前端開發者必備技能。學習路線推薦：

1. 掌握 JSX、Hooks、組件設計；
2. 深入狀態管理與路由；
3. 理解性能優化與大型項目結構；
4. 延伸學習 Next.js、React Native、TS+React 項目實戰等。

---

到這里，這篇文章就和大家說再見啦！我的主頁里還藏著很多 篇 前端 實戰干貨，感興趣的話可以點擊頭像看看，說不定能找到你需要的解決方案～
創作這篇內容花了很多的功夫。如果它幫你解決了問題，或者帶來了啟發，歡迎：
點個贊?? 讓更多人看到優質內容
關注「前端極客探險家」🚀 每周解鎖新技巧
收藏文章?? 方便隨時查閱
📢 特別提醒：
轉載請注明原文鏈接，商業合作請私信聯系
感謝你的閱讀！我們下篇文章再見～ 💕