React 环境搭建

理论讲完了,现在动手把 React 项目跑起来。今天搭建 React 项目只用一个命令, thanks to Vite——比几年前的 create-react-app 快好几倍,而且是官方推荐的新方案。

1. 前置准备:装 Node.js

React 项目运行在 Node.js 环境里。去 nodejs.org 下载 LTS 版本(长期支持版,目前是 20.x),一路下一步安装。装好后打开终端(Windows 用 PowerShell / Git Bash,Mac 用 Terminal),输入:

如果两个命令都有版本号输出,说明环境 OK,可以进入下一步。建议 Node 版本不低于 18。

2. 用 Vite 创建项目(推荐)

Vite 是新一代前端构建工具,由 Vue 作者 Evan You 开发,但完美支持 React。它启动开发服务器几乎瞬间(不像老工具要等几十秒),热更新也飞快。创建 React 项目只要三步:

# 1. 用 Vite 创建 React 项目(推荐,几秒搞定)
npm create vite@latest my-app -- --template react

# 2. 进入项目目录,安装依赖
cd my-app
npm install

# 3. 启动开发服务器
npm run dev
# 浏览器打开 http://localhost:5173 看到页面

浏览器打开 localhost:5173,你会看到一个旋转的 React logo 和一个计数器按钮——这就是 Vite 给你生成的模板项目。试着改改 src/App.jsx 里的文字,保存后页面会自动刷新,这就是"热更新"。

关于 create-react-app(已不推荐)

老教程里你会看到 npx create-react-app my-app 这种写法,这是 React 官方以前的脚手架工具 CRA。但它在 2023 年已被官方废弃(停止维护),启动慢、配置死板。新项目请一律用 Vite,本系列所有示例都基于 Vite。

3. package.json 是什么

package.json 是项目的"身份证",记录项目名、依赖的包、可运行的脚本。打开它看看:

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",            // 启动开发服务器(热更新)
    "build": "vite build",    // 打包构建到 dist/
    "preview": "vite preview" // 本地预览构建产物
  },
  "dependencies": {
    "react": "^18.2.0",       // React 核心
    "react-dom": "^18.2.0"   // React 的 DOM 渲染器
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^5.0.0"
  }
}

几个关键字段:

4. 三大常用脚本

5. 项目目录结构

打开项目文件夹,你会看到这样的结构:

my-app/
├── node_modules/      # 依赖包(自动生成,不要手动改)
├── public/            # 静态资源(不经过构建处理)
│   └── vite.svg
├── src/               # 源代码(你主要在这里写)
│   ├── App.jsx        # 根组件
│   ├── App.css        # 根组件样式
│   ├── index.css      # 全局样式
│   ├── main.jsx       # 入口文件:挂载 React 到 HTML
│   └── assets/        # 会被构建处理的资源
│       └── react.svg
├── index.html         # HTML 模板(Vite 入口)
├── package.json       # 项目依赖与脚本
├── vite.config.js     # Vite 配置
└── .gitignore

作为初学者,你99% 的时间都在 src/ 里写代码,其他文件夹和文件先不用管。两个最关键的文件是入口 main.jsx 和根组件 App.jsx。

6. 入口文件 main.jsx

main.jsx 是整个应用的入口,只做一件事:把 React 组件挂到 HTML 页面上。

// src/main.jsx:整个应用的入口
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";

// 把 App 组件挂载到 index.html 里 id="root" 的 div
createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.html 里有一个 <div id="root">,React 会把整个应用渲染到这个 div 里——这种叫单页应用(SPA):整个网页只有一个 HTML,内容全是 JS 动态渲染的。React.StrictMode 是开发模式下的辅助工具,会故意多跑一次渲染帮你发现潜在问题,生产环境自动失效。

7. 根组件 App.jsx

App.jsx 是你接触最多的文件,模板里自带一个计数器示例:

// src/App.jsx:根组件,所有页面都从这里开始
import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>我的第一个 React 应用</h1>
      <button onClick={() => setCount(count + 1)}>
        点击了 {count} 次
      </button>
    </div>
  );
}

export default App;

不用纠结每行什么意思,后面会逐章讲。现在你只需要知道:这就是一个普通的 JS 函数,返回一段像 HTML 又像 JS 的东西(JSX)。把它改成你想要的样子,保存,页面立刻变化——这就是 React 开发的日常。

8. 装一个 VS Code 插件

用 VS Code 写 React,强烈推荐装 esbenp.prettier-vscode(代码格式化)和 dsznajder.es7-react-js-snippets(React 代码片段,输入 rafce 自动生成一个组件骨架)。这两件套能极大提升写代码的幸福感。

小结

这一章我们用 Vite 把 React 项目跑了起来,认识了 package.json、目录结构、三大脚本和入口文件。现在你已经有了一个能跑的"实验室",后面所有的代码示例都可以贴到这个项目里试。下一篇我们正式进入 React 的核心语法——JSX。

← 上一篇 React 简介

下一篇 JSX 语法 →

✈️💬