使用Vite创建一个React.js应用程序

React.js是一个JavaScript库，用于创建单页Web应用程序的前端。它通过将UI划分为小的、更容易管理的组件来降低应用程序的复杂性。

我们通常使用npx create-react-app app-name 命令来创建一个React应用程序。

本文讨论了使用Vite设置React应用程序的另一种方法。

我们将重点讨论。

• Vite的含义。
• Vite的好处。
• Vite的特点。
• 如何使用Vite创建一个React应用程序。

前提条件

要继续学习，你需要对以下内容有基本了解。

1. [React.js]。
2. [热点模块替换]页面会谈。

你的电脑上还应该安装有Node.js。Node提供了Node Package Manager（npm），用于配置React应用程序中的依赖关系。

Vite是什么？

Vite是一个构建工具，可以促进开发人员获得更快的开发体验。它是由Evan You创建的。

[Vite]支持以下内容。

1.热模块替换

一个快速的开发服务器，由于其增强的功能，可以提供快速的热模块替换（HMR）。

2.卷积

Vite有一个构建命令，将开发者的代码与Rollup捆绑起来。

这是一个JavaScript模块捆绑器，可以编译简单的代码片断并将其构建为复杂的应用程序。

由于Rollup 是预先配置的，所以很容易生成高度优化的静态应用程序，供生产使用。

Vite的好处

开发人员的生产力受到许多因素的影响，包括性能和速度。

JavaScript会导致应用程序的速度变慢，这取决于其复杂性。Vite通过使用Esbuild解决了这个问题。

EsBuild是一个依赖性预捆绑器，比其他框架增强了依赖性的预捆绑。这导致了服务器速度的提高和热模块替换。

Vite的特点

Vite的主要特点包括。

1. 即时服务器启动。
2. 快速的热模块替换。
3. 优化的构建过程。

现在让我们用Vite创建一个React应用程序。

使用Vite创建一个React应用程序。

导航到你的桌面并创建一个新的文件夹。这个目录将存储我们所有的文件。

接下来，启动一个命令窗口并导航到应用程序的目录，如下图所示。

注意，我们将在本教程中使用npm。然而，如果你喜欢yarn，你可以从这里访问它。

在你的CLI ，写下以下命令。

npm init vite

我们需要添加一个项目和包名，如下图所示。

然后我们需要选择React作为框架和变体。

我们的项目现在已经创建。让我们安装并运行它。

在终端，导航到生成的项目。在我的例子中，ViteTutoral ，并输入以下命令。

npm install

这个命令安装了所需的开发依赖，你可以从package.json 文件中访问。

它还创建了一个node_modules 文件夹，可以看作是一个外部模块的缓存。

你的package.json 文件看起来应该如下所示。

最后，包括以下命令来启动开发服务器。

npm run dev

复制并粘贴所提供的链接到你的浏览器上。你现在已经在你的本地服务器上运行React和Vite了。祝贺你

npm run serve命令完成了应用的构建并渲染了生产版本，而npm run dev则初始化了开发服务器。

当你在代码编辑器中打开项目文件夹时，你会看到不同的文件，其中包括main.jsx 文件。

负责浏览器输出的代码在App.jsx ，并由main.jsx 文件渲染。

让我们创建一个简单的应用程序来了解更多关于Vite的信息。

在App.jsx 文件中包括下面的代码。

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

function App() {
  return (
    <div className="App">
        <h1>Working with Vite</h1>
        <p>Hello There! This was such a first fun experience creating a React app using Vite.
          The lightning-fast starting of the dev server is such an amazing experience while using this tool compared to the normal<b>npx create-react-app (app-name) way.</b>
          Now I will run the **"npm run serve"** command to experience the instant HMR experience that Vite provides.
        </p>

        <h1>Happy Coding!</h1>
   </div>
  )
}

export default App

现在到你的终端，再次运行npm run dev命令，并按照提供的本地链接。

现在我们已经创建了我们简单的React+Vite应用程序，看起来像这样。

.

注意，在Vite中，index.html文件不像React那样放在公共文件夹中。这个HTML文件有一个<script type="module" src='..'></script> 模块，它本质上是React应用的入口。

你也会意识到，%PUBLIC_URL% 选项是缺失的。这个占位符映射了React的公共文件夹内的任何静态文件。

%PUBLIC_URL% 由于 文件中的URL的自动重定位，Vite中不需要这个选项。index.html

总结

本文讨论了如何使用Vite构建工具创建一个React+Vite的应用程序。它还强调了Vite的功能和好处。

因此，你可以利用从本教程中获得的知识和技能来制作更多高质量的应用程序。