当前位置：首页 > news >正文

React入门第一步：如何用Vite创建你的第一个React项目？

news 来源：原创 2025/6/10 5:17:52

系列引言：
你是否想学习当下最火的前端技术React，但又不知从何下手？别担心！《React入门教程》系列就是为你准备的。在接下来的10篇文章中，我们将用最简单、最直接的方式，带你一步步掌握React的核心知识。没有高深理论，只有清晰的实战。现在，就让我们从创建第一个项目开始吧！

你好，未来的React开发者！

学习任何一门新技术，最重要也是最困难的，就是迈出第一步。今天，我们的目标非常明确：用最快、最简单的方式，创建一个能跑起来的React项目，并看到你的第一行React代码在浏览器里显示出来。

准备工作：你需要什么？

在起飞之前，请确保你的“飞船”上安装了以下两个基本工具：

Node.js: React 的开发环境依赖于 Node.js。它为我们提供了 npm (Node Package Manager)，一个用于安装和管理项目依赖的强大工具。
- 下载地址： Node.js 官网。请下载 LTS (长期支持) 版本。
- 检查安装： 打开你的终端（Windows 的 CMD/PowerShell，macOS 的 Terminal），输入 node -v 和 npm -v。如果能看到版本号，说明安装成功。
代码编辑器: 一个好的编辑器能让你的开发事半功倍。强烈推荐 Visual Studio Code (VS Code)，它免费、强大，且拥有无与伦比的 JavaScript 和 React 生态支持。
- 下载地址： VS Code 官网

为什么是Vite，而不是Create React App?

过去，create-react-app (CRA) 是官方推荐的 React 项目脚手架。但现在，我们有一个更好、更快的选择：Vite (法语中“快”的意思，发音 /vit/)。

CRA 的工作方式： 在你启动项目时，它会用 Webpack 把所有代码提前打包好，再启动开发服务器。项目越大，启动越慢，几分钟的等待是家常便饭。
Vite 的工作方式： 它利用了现代浏览器原生支持的 ES Module 特性，在你请求某个文件时才即时编译。这使得它的开发服务器启动速度是秒级的，无论项目多大！

结论： 选择 Vite，就是选择极致的开发体验和面向未来的技术。

第一步：一分钟创建项目

打开你的终端，让我们用一行命令开启 React 世界的大门。

执行创建命令：
```
npm create vite@latest
```
接下来，Vite 会以交互式的方式问你几个问题：
- Project name: … my-react-app (输入你的项目名，比如 my-react-app)
- Select a framework: › React (使用上下箭头选择 React)
- Select a variant: › JavaScript (我们先从纯 JavaScript 开始)

Vite 会立刻为你创建好项目文件夹。根据提示，执行以下命令：

# 进入项目目录
cd my-react-app# 安装项目所需的依赖包
npm install# 启动开发服务器
npm run dev

稍等片刻，你的终端会显示：

  VITE v5.x.x  ready in xxx ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose...

打开浏览器，访问 http://localhost:5173 (你的端口号可能不同)。如果看到一个旋转的 React Logo 和一些文字，那么恭喜你，你的第一个 React 应用已经成功运行了！

第二步：庖丁解牛 - 剖析项目结构

用 VS Code 打开你创建的 my-react-app 文件夹，我们来看看里面都有什么：

my-react-app
├── public/              # 存放不会被编译的静态资源，如 favicon.ico
├── src/                 # 核心代码目录，我们 99% 的工作都在这里
│   ├── assets/          # 存放组件内部使用的静态资源，如图片、CSS
│   ├── App.css          # App 组件的样式文件
│   ├── App.jsx          # App 根组件文件
│   ├── index.css        # 全局样式文件
│   └── main.jsx         # 整个应用的 JavaScript 入口文件
├── .eslintrc.cjs
├── .gitignore
├── index.html           # 整个应用的 HTML 入口文件 (是的，只有一个)
├── package.json         # 项目信息和依赖配置文件
└── vite.config.js       # Vite 的配置文件

理解这条生命线：

浏览器首先加载 index.html。
在 index.html 中，你会看到一个 <div id="root"></div> 和一行 <script type="module" src="/src/main.jsx"></script>。
这行 script 会加载并执行 src/main.jsx。
main.jsx 里的代码会找到 id 为 root 的 div，然后把我们的 React 应用（以 <App /> 组件为根）渲染到这个 div 里面。

从此以后，我们几乎只和 src 目录下的 .jsx 文件打交道了。

第三步：React世界的基石 - JSX与组件

打开 src/App.jsx，你会看到类似这样的代码：

import './App.css'function App() {return (<><h1>Vite + React</h1>{/* ... 其他代码 ... */}</>)
}export default App

这里面有两个 React 最核心的概念：

组件 (Component): 在 React 中，一个组件就是一个返回 UI 元素的 JavaScript 函数。这里的 App 就是一个函数组件。你可以把组件想象成一个个独立的、可复用的 UI 积木。
JSX: 这段看起来像 HTML 的代码，其实不是 HTML，它叫 JSX (JavaScript XML)。它是 JavaScript 的一个语法扩展，让我们可以在 JavaScript 中用声明式的方式来描述 UI 应该长什么样。浏览器并不认识 JSX，Vite 会在背后把它编译成普通的 JavaScript。

JSX 的强大之处在于：你可以在 {} 中无缝地嵌入任何 JavaScript 表达式！

第四步：动手实践 - 修改你的第一个组件

让我们来亲手修改 App.jsx，感受一下 React 开发的魅力。

将 src/App.jsx 的内容替换成下面的代码：

import './App.css'function App() {const name = "World";const style = { color: 'skyblue', fontSize: '48px' };return (<><h1 style={style}>Hello, {name}!</h1><p>This is my first React application.</p><p>Current time is: {new Date().toLocaleTimeString()}</p></>)
}export default App

保存文件！

现在，切换回你的浏览器。你会发现页面瞬间就更新了，甚至没有刷新整个页面！这就是 Vite 提供的热模块替换 (Hot Module Replacement, HMR) 功能，它极大地提升了我们的开发效率。

在新的代码里：