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 Hookimport 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 与 HTMLconst 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.jsimport { 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://r[章]eact.iamkasong[来].com
掘金 React 专栏