React安装 #

一、环境准备 #

1.1 安装Node.js #

React 开发需要 Node.js 环境：

bash

# 检查Node.js版本
node -v

# 检查npm版本
npm -v

推荐版本：

Node.js >= 16.0.0
npm >= 8.0.0

1.2 安装Node.js方式 #

方式一：官网下载

访问 nodejs.org 下载 LTS 版本

方式二：使用nvm（推荐）

bash

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装Node.js
nvm install --lts

# 使用LTS版本
nvm use --lts

方式三：使用Homebrew（macOS）

bash

brew install node

二、创建React项目 #

2.1 使用Vite（推荐） #

Vite 是新一代前端构建工具，启动速度快，热更新迅速。

bash

# 使用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

TypeScript模板：

bash

npm create vite@latest my-react-app -- --template react-ts

项目结构：

text

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

2.2 使用Create React App #

Create React App 是官方提供的脚手架工具：

bash

# 使用npx
npx create-react-app my-react-app

# 使用npm
npm init react-app my-react-app

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

TypeScript模板：

bash

npx create-react-app my-react-app --template typescript

项目结构：

text

my-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── setupTests.js
├── .gitignore
├── package.json
└── README.md

2.3 方式对比 #

特性	Vite	Create React App
启动速度	极快	较慢
热更新	毫秒级	秒级
配置灵活性	高	需eject
生态成熟度	发展中	成熟
推荐程度	推荐	维护模式

三、启动项目 #

3.1 安装依赖 #

bash

cd my-react-app
npm install

3.2 启动开发服务器 #

bash

# Vite项目
npm run dev

# Create React App项目
npm start

3.3 访问应用 #

打开浏览器访问：

Vite：http://localhost:5173
Create React App：http://localhost:3000

四、编辑器配置 #

4.1 VS Code推荐扩展 #

text

必装扩展
├── ES7+ React/Redux/React-Native snippets
├── Prettier - Code formatter
├── ESLint
└── Auto Rename Tag

可选扩展：

Path Intellisense：路径智能提示
Bracket Pair Colorizer：括号配对着色
GitLens：Git 增强

4.2 VS Code配置 #

创建 .vscode/settings.json：

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

4.3 ESLint配置 #

bash

npm install -D eslint @eslint/js eslint-plugin-react

创建 eslint.config.js：

javascript

import js from '@eslint/js';
import react from 'eslint-plugin-react';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{js,jsx}'],
    plugins: {
      react,
    },
    rules: {
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
    },
  },
];

4.4 Prettier配置 #

bash

npm install -D prettier eslint-config-prettier

创建 .prettierrc：

json

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

五、项目配置详解 #

5.1 Vite配置 #

vite.config.js：

javascript

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

5.2 package.json脚本 #

json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

六、React DevTools #

6.1 安装 #

在浏览器中安装 React Developer Tools 扩展：

6.2 功能介绍 #

text

React DevTools
├── Components    查看组件树
├── Profiler      性能分析
└── Settings      设置选项

Components面板功能：

查看组件层级结构
检查组件 Props 和 State
追踪组件渲染次数
定位组件源码

七、常见问题 #

7.1 端口被占用 #

bash

# macOS/Linux查找占用端口的进程
lsof -i :3000

# 终止进程
kill -9 <PID>

7.2 npm安装缓慢 #

bash

# 切换淘宝镜像
npm config set registry https://registry.npmmirror.com

# 或使用nrm管理镜像源
npm install -g nrm
nrm use taobao

7.3 清除缓存 #

bash

# 清除npm缓存
npm cache clean --force

# 删除node_modules重新安装
rm -rf node_modules package-lock.json
npm install

八、总结 #

步骤	命令
创建项目	`npm create vite@latest my-app -- --template react`
安装依赖	`npm install`
启动项目	`npm run dev`
构建项目	`npm run build`

开发环境搭建要点：

推荐使用 Vite 创建项目
配置好 ESLint 和 Prettier
安装 React DevTools 调试工具
使用 VS Code 并安装必要扩展