React介绍

一、环境准备与项目创建

1. ‌安装 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 组件

1. ‌函数组件示例‌（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;

2. ‌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>);

四、关键开发技能掌握

1. ‌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 }]);};

五、进阶开发配置

1. ‌路由管理‌（安装 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

六、项目构建与部署

1. ‌生产环境构建

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 专栏