Vite+React搭建开发构建环境实践记录

下面我将详细讲解“Vite+React搭建开发构建环境实践记录”的完整攻略及示例。

一、什么是 Vite？

Vite 是一个由 Evan You 提出的前端开发构建工具，旨在提供快速的开发环境和尽可能地优化生产环境。它基于 ES Modules，能够在开发环境下实现轻量级，快速的响应式开发体验。此外，它还提供了对 Vue.js、React 等框架的原生支持。

二、基于 Vite 搭建 React 开发环境

2.1 安装环境

Vite 需要 Node.js 14.0+ 环境支持，因此首先确保已经安装了 Node.js。然后按照如下步骤安装 Vite：

npm init vite-app my-react-vite-app --template react
cd my-react-vite-app
npm install
npm run dev

上面的命令会在当前目录下创建一个名为 my-react-vite-app 的 React 项目，并安装它所依赖的模块。其中，npm run dev 命令将启动一个开发服务器，您可以在浏览器中预览和测试您的 React 项目。

2.2 编写 React 代码

安装完成后，您可以进入 src 目录，编辑 main.jsx 文件，开始编写 React 代码。例如，您可以编写如下内容：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <h2>Vite + React</h2>
        <p>
          You clicked {count} times<button onClick={() => setCount(count + 1)}>Click me</button>
        </p>
      </header>
    </div>
  );
}

export default App;

在上面的 React 代码中，我们为组件 App 定义了一个 state 变量 count，并使用 useState 钩子函数初始化。同时，你可以使用 onClick 属性来绑定点击事件并改变 count 的值。

2.3 运行 React 项目

保存修改后，您可以在浏览器中预览您的项目，只需要运行以下命令：

npm run dev

然后在浏览器中打开 http://localhost:3000 即可预览你的 React 应用。

三、Vite 的优势

3.1 极速的启动和热重载

Vite 使用了现代化而高效的 ES Modules，配合打包工具 Rollup，实现了从保存到浏览器渲染的速度比 webpack 更快。几乎感觉不到编译时间的出现，并搭载了自身的热重载服务器。

3.2 优化的构建效率

由于 Vite 最初为实现高效的开发体验而打造，因此在开发环境下使用效果尤为明显。随着 Vite 的逐渐推广，越来越多的项目已经在生产环境中使用 Vite 进行构建。相对于 webpack，Vite 在短时间内进行构建的效率明显更高。

四、示例说明

下面分别给出了两个 React 示例，使用 Vite 构建的开发环境：

4.1 使用 React Hooks 做的 Emoji 排列组件

import React from "react";
import "./styles.css";
import useSortableEmoji from "./useSortableEmoji";

export default function App() {
  const [emojis, setEmojis] = useSortableEmoji([
    "?",
    "?‍?",
    "❤️",
    "?",
    "?",
    "?",
    "?",
    "?"
  ]);

  return (
    <div className="App">
      <h2>Sortable Emoji</h2>
      <p>Drag and drop to organize them in any order you'd like!</p>
      <div className="emojis">
        {emojis.map((emoji, index) => (
          <div
            key={emoji}
            draggable={true}
            onDragStart={event => {
              event.dataTransfer.setData("text/plain", index);
            }}
            onDragOver={event => {
              event.preventDefault();
            }}
            onDrop={event => {
              const droppedIndex = event.dataTransfer.getData("text/plain");
              setEmojis(oldEmojis => {
                const newEmojis = [...oldEmojis];
                newEmojis.splice(index, 0, newEmojis.splice(droppedIndex, 1)[0]);
                return newEmojis;
              });
            }}
            className="emoji"
          >
            {emoji}
          </div>
        ))}
      </div>
    </div>
  );
}

运行 npm run dev 即可在浏览器中查看该组件的效果。

4.2 使用 React Context API 的二个示例

4.2.1 使用 Context API 实现一个主题切换功能

import React, { useContext } from "react";
import "./styles.css";
import { ThemeContext } from "./themeContext";

export default function App() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div className={`App ${theme}`}>
      <h1>Theme Switcher</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <p>Current theme: {theme}</p>
    </div>
  );
}

在上面的代码中，我们使用了 useContext 钩子函数来读取由 createContext 创建的主题信息。运行 npm run dev 即可在浏览器中查看该组件的效果。

4.2.2 使用 Context API 实现一个用户登录/注销示例

import React, { useContext } from "react";
import "./styles.css";
import { UserContext } from "./userContext";

export default function App() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div className="App">
      <h1>User Login/Logout</h1>
      {
        user ? (
          <React.Fragment>
            <p>Welcome, {user.username}!</p>
            <button onClick={() => setUser(null)}>Log Out</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <p>Please log in:</p>
            <form onSubmit={(event) => {
              event.preventDefault();
              const username = event.target.elements.username.value;
              const password = event.target.elements.password.value;
              setUser({ username, password });
            }}>
              <label htmlFor="username">Username:</label>
              <input type="text" id="username" name="username" />

              <label htmlFor="password">Password:</label>
              <input type="password" id="password" name="password" />

              <button type="submit">Log In</button>
            </form>
          </React.Fragment>
        )
      }
    </div>
  );
}

在上面的代码中，我们创建了一个 UserContext，用于管理用户登录状态。如果用户已经登录，我们显示欢迎语和注销按钮；否则，我们显示登录表单。运行 npm run dev 即可在浏览器中查看该组件的效果。

以上是基于 Vite 搭建 React 开发环境的完整攻略和两个示例说明。希望能对您的学习有所帮助。