在线笔记

使用 Vite 工具结合 React 框架来构建现代 Web 应用是一个高效且快速的方式。Vite 提供了快速的冷启动和即时模块热更新，非常适合开发大型前端应用。下面将详细介绍如何使用 Vite 和 React 构建一个简单的现代 Web 应用。

步骤 1: 安装 Node.js

确保你的开发环境中已安装 Node.js。你可以从 Node.js 官网 下载并安装。

步骤 2: 创建 Vite 项目

打开终端或命令提示符，运行以下命令来创建一个新的 Vite + React 项目：

npm create vite@latest my-react-app -- --template react

这个命令会创建一个名为 my-react-app 的新目录，并在其中设置一个使用 React 的 Vite 项目。

步骤 3: 进入项目目录并安装依赖

cd my-react-app
npm install

步骤 4: 运行开发服务器

使用以下命令启动开发服务器：

npm run dev

这将在默认的 localhost:5173 上启动一个开发服务器。你应该能看到一个欢迎页面，说明 Vite 和 React 正在运行。

步骤 5: 编写 React 组件

打开 src/App.jsx 文件，修改或添加一些 React 组件代码：

import React from 'react'
import './App.css'

function App() {
  return (
    <div className="App">
      <h1>Hello Vite + React!</h1>
    </div>
  )
}

export default App

步骤 6: 添加更多功能（可选）

你可以根据需要添加更多的 React 组件和功能。例如，添加一个关于页面：

1. 在 src 目录下创建一个新的文件 About.jsx：

import React from 'react';
import './App.css';

function About() {
  return (
    <div className="App">
      <h1>About Page</h1>
      <p>This is a simple about page.</p>
    </div>
  );
}

export default About;

2. 在 App.jsx 中添加路由以显示这个页面：

首先，安装 react-router-dom：

npm install react-router-dom

然后修改 App.jsx 以使用路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import About from './About'; // 导入 About 组件
import './App.css';

function App() {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<h1>Home Page</h1>} /> // Home 页面的路由定义
          <Route path="/about" element={<About />} /> // About 页面的路由定义
        </Routes>
      </div>
    </Router>
  );
}

export default App;

步骤 7: 构建项目（可选）

当你的应用开发完成，并准备部署时，你可以构建项目：

npm run build

这将在 dist 目录下生成一个优化过的生产版本的应用。你可以将这个目录中的内容部署到任何静态文件服务器上。

通过以上步骤，你应该能够成功使用 Vite 和 React 构建一个现代 Web 应用。随着你对 React 和 Vite 的更深入学习，你可以进一步探索更多高级功能和最佳实践。