一、React 簡介
React 是由 Facebook 開發和維護的一個用于構建用戶界面的 JavaScript 庫，適用于構建復雜的單頁應用（SPA）。它采用組件化、虛擬 DOM 和聲明式編程等理念，已成為前端開發的主流選擇。
二、React 安裝方式
2.1 使用 CDN 引入（適合學習/演示）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Hello React</title><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><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">const App = () => <h1>Hello, React!</h1>;ReactDOM.createRoot(document.getElementById('root')).render(<App />);</script>
</body>
</html>
2.2 使用 Create React App（推薦）
安裝 Node.js
訪問 https://nodejs.org/ 安裝最新 LTS 版本。
安裝并創建項目
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
瀏覽器訪問：http://localhost:3000
2.3 使用 Vite 創建 React 項目（更快）
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
三、React 項目結構說明
my-app/
├── public/
├── src/
│ ├── App.js
│ ├── index.js
│ └── components/
├── package.json
└── README.md
四、React 基本語法示例
function App() {const [count, setCount] = React.useState(0);return (<div><h1>Hello, React!</h1><p>當前計數：{count}</p><button onClick={() => setCount(count + 1)}>加一</button></div>);
}
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
五、核心特性簡介
| 特性 | 說明 |
|---|---|
| 組件化 | UI 拆分為多個組件 |
| JSX | JavaScript + XML 語法 |
| Hooks | React 16.8+ 狀態管理 API（如 useState） |
| 虛擬 DOM | 高效更新界面 |
| 單向數據流 | 父組件向子組件傳遞數據 |
六、常用 Hooks 示例
import React, { useState, useEffect } from 'react';function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {const timer = setInterval(() => setSeconds(s => s + 1), 1000);return () => clearInterval(timer);}, []);return <div>已運行：{seconds} 秒</div>;
}
七、常見問題
Q1: JSX 報錯？
- 確保使用 Babel 編譯 JSX 或通過 Create React App/Vite 搭建項目
Q2: 項目無法啟動？
- 使用
npm install安裝依賴 - 檢查端口沖突，或使用
npm start -- --port=8080
八、推薦開發工具
- VS Code（主流編輯器，搭配 ESLint/Prettier 插件）
- React Developer Tools（瀏覽器插件）
九、學習資源推薦
- React 官網
- React 中文文檔
- 菜鳥教程 React
- MDN React 入門
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
![BUUCTF在線評測-練習場-WebCTF習題[MRCTF2020]你傳你[特殊字符]呢1-flag獲取、解析](http://pic.xiahunao.cn/BUUCTF在線評測-練習場-WebCTF習題[MRCTF2020]你傳你[特殊字符]呢1-flag獲取、解析)
