一、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获取、解析)
