开发环境搭建

基础环境安装

具体步骤请查看 JavaScript 中的开发环境搭建

创建 React 项目

# 确保已安装 Node.js (>= 14.0.0)
node --version

# 使用 npm 创建项目
npx create-react-app my-app

# 或使用 yarn
yarn create react-app my-app

# 进入项目目录
cd my-app

# 启动开发服务器
npm start
# 或
yarn start

使用 Vite (推荐现代项目)

Vite 更快、更轻量，是目前的主流选择。

# 使用 npm
npm create vite@latest my-react-app -- --template react
# 或使用 yarn
yarn create vite my-react-app --template react
# 或使用 pnpm
pnpm create vite my-react-app --template react

# 安装依赖
cd my-react-app
npm install
npm run dev

3. 手动配置 Webpack 环境

适合需要高度自定义的项目。

# 1. 初始化项目
mkdir my-react-app
cd my-react-app
npm init -y

# 2. 安装 React
npm install react react-dom

# 3. 安装开发依赖
npm install -D webpack webpack-cli webpack-dev-server
npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader
npm install -D html-webpack-plugin css-loader style-loader

# 4. 安装 TypeScript (可选)
npm install -D typescript @types/react @types/react-dom
npm install -D @babel/preset-typescript

配置文件示例：

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, "public"),
        },
        port: 3000,
        hot: true,
    },
    resolve: {
        extensions: [".js", ".jsx"],
    },
};

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

使用 Next.js (全栈框架)

如果需要服务端渲染或全栈功能：

# 创建 Next.js 项目
npx create-next-app@latest my-next-app
# 或使用 TypeScript
npx create-next-app@latest --typescript

开发工具配置

推荐的 VS Code 扩展：

• ES7+ React/Redux/React-Native snippets - React 代码片段
• Prettier - 代码格式化
• ESLint - 代码检查
• Auto Rename Tag - 自动重命名标签

常用包安装：

# 路由
npm install react-router-dom

# 状态管理
npm install redux react-redux
# 或
npm install zustand
# 或
npm install @reduxjs/toolkit

# UI 组件库
npm install antd
# 或
npm install @mui/material @emotion/react @emotion/styled
# 或
npm install chakra-ui

# HTTP 客户端
npm install axios

# 样式方案
npm install styled-components
# 或
npm install tailwindcss