React 创建第一个项目

前面几节介绍了多种安装方式，本节我们用 Vite 真正创建并运行第一个 React 项目，从建目录到看到页面的完整过程走一遍，帮你建立"项目长什么样"的整体概念。

第一步：确认环境

确保已安装 Node.js 18+ 与 npm，打开终端检查：

node -v
npm -v

如果提示找不到命令，请先按"React 安装(NPM)"一节安装 Node.js。

第二步：创建项目

在终端执行：

npm create vite@latest hello-react

按提示选择框架 React（再选 JavaScript 或 TypeScript 均可）。随后进入目录、安装依赖：

cd hello-react
npm install

第三步：启动并预览

执行启动命令：

npm run dev

终端会出现类似 http://localhost:5173 的地址，浏览器打开它。渲染效果：首次看到的是 Vite 默认欢迎页。

第四步：修改第一个界面

打开 src/App.jsx，把默认内容替换成：

function App() {
  const name = '小明';
  return (
    <div>
      <h1>我的第一个 React 项目</h1>
      <p>你好，{name}！</p>
    </div>
  );
}

export default App;

保存文件，浏览器自动刷新。渲染效果：页面显示标题"我的第一个 React 项目"和"你好，小明！"。花括号 {name} 用来在 JSX 中插入 JavaScript 表达式的值。

第五步：理解入口文件

页面能显示内容，靠的是 src/main.jsx 把 App 挂载到 index.html 中：

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

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);
// 渲染效果：把 App 组件渲染到 index.html 里 id 为 root 的节点中

index.html 中预先放了一个 <div id="root"></div>，createRoot 会找到它并渲染组件树。

小结

创建第一个项目只需四步：npm create vite@latest 生成项目、npm install 装依赖、npm run dev 启动、修改 src/App.jsx 写自己的界面。多改多刷新，很快就能上手 React 开发。