搭建开发环境（Vite） - React 教程

讲解

React 官方文档现在推荐用框架（Next.js 等）或构建工具起步。对学习者来说，Vite 是最轻快的选择：一条命令出项目、冷启动一秒内、保存即热更新。学透组件和 Hooks 之后，再按项目需要决定要不要上 Next.js 这类全栈框架（SSR、服务端组件是面试加分项，但建立在基础牢固的前提上）。

步骤和任何现代前端项目一样：先装 Node.js LTS（20+，自带 npm），node -v 验证。然后 npm create vite@latest my-app -- --template react 创建项目（模板选 react；想学类型安全的选 react-ts）。生成的目录里：index.html 是入口页面（注意它就在项目根目录，这是 Vite 的风格），src/main.jsx 是应用入口（createRoot 挂载），src/App.jsx 是根组件，vite.config.js 里注册了 @vitejs/plugin-react——它负责 JSX 编译和 Fast Refresh（改组件代码时保留组件状态的热更新，体验极佳）。

日常三条命令：npm install、npm run dev（默认 5173 端口）、npm run build（产物到 dist/）。编辑器用 VS Code 即可，JSX 语法高亮开箱即用，推荐再装 ESLint 和 Prettier 扩展。脚手架生成的 .eslintrc 里通常带 eslint-plugin-react-hooks——它会检查 Hooks 规则（后面专章讲），务必保留，它是新手的安全带。

示例

创建项目的完整流程（仅示意，版本号以实际为准）：

node -v          # v22.x
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev      # http://localhost:5173

项目装好后，理解 JSX 是怎么被处理的很重要。下面模拟 Vite 插件管线对一段 JSX 做的事（在本教程构建时被真实执行）：

import assert from 'node:assert/strict';

// 极简 JSX → JS 转换演示：把 <div className="app">你好</div> 变成函数调用
function transformJsx(source) {
  return source.replace(
    /<(\w+) className="([^"]*)">([^<]*)<\/\1>/g,
    (_, tag, cls, text) => 'createElement("' + tag + '", { className: "' + cls + '" }, "' + text + '")',
  );
}

const source = 'const el = <div className="app">你好</div>;';
const output = transformJsx(source);
assert.ok(output.includes('createElement("div"'));
assert.ok(!output.includes('<div>'));

// Fast Refresh 的核心思想：按模块替换，保留组件状态
const modules = new Map();
modules.set('./Button.jsx', { version: 1 });
function hotUpdate(path, newModule) {
  const prev = modules.get(path);
  modules.set(path, { ...newModule, version: (prev ? prev.version : 0) + 1 });
  return '已替换 ' + path + '，组件状态保留';
}
assert.strictEqual(hotUpdate('./Button.jsx', { code: 'v2' }), '已替换 ./Button.jsx，组件状态保留');
assert.strictEqual(modules.get('./Button.jsx').version, 2);

console.log('JSX 转换后:', output);
console.log(hotUpdate('./App.jsx', { code: 'v3' }));

生成的应用入口长这样：

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

StrictMode 是开发期的「严格教练」：它会让组件渲染和副作用故意执行两遍，帮你尽早发现不纯的渲染函数和没清理的副作用——上线后自动失效，别关它。

常见坑

Node 版本过低：Vite 需要 Node 18+，老环境先升级，报错信息往往和风马牛不相及。
把 create-react-app 当起点：CRA 已停止维护，官方都移除了推荐；新项目用 Vite 或框架。
文件扩展名乱用：含 JSX 的文件用 .jsx（或 .tsx），纯逻辑用 .js，Vite 对扩展名有明确预期。
关掉 StrictMode 消除「双执行」：双执行是刻意为之的体检，正确姿势是修好代码而不是关掉教练。
依赖装到全局：vite 等都在 devDependencies 里，通过 npm run 调用本地版本，保证团队环境一致。

小结

Node LTS → npm create vite@latest → npm run dev；插件负责 JSX 编译与 Fast Refresh，StrictMode 帮你写更健壮的代码。下一章深入 JSX 语法本身。