React介绍
一、环境准备与项目创建
安装 Node.js
官网下载 LTS 版本（建议 v18+）：https://nodejs.org
node -v # 验证安装（应显示版本号）
创建 React 应用（官方推荐方式）
npx create-react-app my-app # 创建项目 cd my-app # 进入项目目录 npm start # 启动开发服务器
浏览器自动打开 http://localhost:3000
二、核心文件结构解析
my-app/ ├── src/ │ ├── App.js # 根组件 │ ├── index.js # 应用入口（React 18 使用 createRoot） │ ├── index.css # 全局样式 ├── public/ # 静态资源 │ └── index.html # 页面模板
三、编写第一个 React 组件
函数组件示例（
src/App.js）
// 引入 React 和 useState Hook
import React, { useState } from 'react';
function App() {
// 声明状态变量
const [count, setCount] = useState(0);
// 事件处理函数
const increment = () => setCount(count + 1);
return (
<div className="App">
<h1>React 计数器</h1>
<p>当前计数: {count}</p>
<button onClick={increment}>点击增加</button>
</div>
);
}
export default App;React 18 入口文件（
src/index.js）
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// 创建根节点
const root = ReactDOM.createRoot(document.getElementById('root'));
// 渲染应用
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);四、关键开发技能掌握
JSX 语法规则
// 混合 JavaScript 与 HTML
const element = <h1>Hello, {user.name}!</h1>; 组件通信
// 父组件传递数据
<ChildComponent title="数据" onUpdate={handleUpdate} />
// 子组件接收
function ChildComponent({ title, onUpdate }) {
return <button onClick={() => onUpdate(title)}>更新</button>;
}状态管理
// 使用 useState 管理状态
const [todos, setTodos] = useState([
{ id: 1, text: '学习 React' }
]);
// 添加新项目
const addTodo = (text) => {
setTodos([...todos, { id: Date.now(), text }]);
};五、进阶开发配置
路由管理（安装 React Router v6）
npm install react-router-dom
// src/index.js
import { BrowserRouter } from 'react-router-dom';
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
); 样式方案
# 安装 CSS 模块支持 npm install sass
状态管理（推荐 Zustand）
npm install zustand
六、项目构建与部署
生产环境构建
npm run build # 生成优化后的代码到 build/ 目录
部署选项
Vercel：npm install -g vercel && vercel
Netlify：直接拖拽 build 文件夹上传
GitHub Pages：使用 gh-pages 包自动部署
七、学习资源推荐
官方文档：react.dev（全新交互式教程）
实战项目：
Todo 应用（基础状态管理）
电影搜索应用（API 集成）
电商网站（路由+状态管理）
中文社区：
React 技术揭秘：https://react.iamkasong.com
掘金 React 专栏
