React 安装(Vite)

Vite 是一个现代化的前端构建工具，启动快、热更新及时，是当前官方推荐的 React 项目脚手架。相比传统工具，它开发体验更流畅，适合从零开始学习 React 的人使用。

第一步：准备环境

Vite 需要 Node.js 18 及以上版本，先确认版本：

node -v
npm -v

版本过低请先升级 Node.js，再继续下面的操作。

第二步：用 Vite 创建项目

在终端中执行（my-react-app 是项目名，可自行修改）：

npm create vite@latest my-react-app

按提示选择框架，第一层选 React，第二层按需选择 JavaScript 或 TypeScript。然后进入项目目录并安装依赖：

cd my-react-app
npm install

第三步：启动开发服务器

执行启动命令：

npm run dev

终端会显示一个本地地址，例如 http://localhost:5173，用浏览器打开即可看到默认的 Vite + React 欢迎页。

第四步：看看目录里有什么

Vite 生成的 React 项目结构很简洁：

my-react-app
├── index.html        # 页面入口，含挂载点
├── package.json      # 依赖与脚本
├── vite.config.js    # Vite 配置
└── src
    ├── main.jsx      # 程序入口，把 App 挂载到页面
    ├── App.jsx       # 根组件
    └── index.css     # 全局样式

日常开发主要修改 src 目录下的文件。

第五步：修改首页试试

打开 src/App.jsx，把它改成：

function App() {
  return (
    <div>
      <h1>我的第一个 Vite 项目</h1>
      <p>使用 React 开发页面</p>
    </div>
  );
}

export default App;

保存后浏览器会立刻热更新，无需手动刷新。渲染效果：页面显示大标题"我的第一个 Vite 项目"和一行说明文字。

小结

用 Vite 安装 React 只需三条命令：npm create vite@latest、npm install、npm run dev。它开箱即用、热更新流畅，是当前学习 React 最推荐的安装方式。