使用 Vite 创建 React 应用程序 - Javascript

Vite 是一个轻量级的前端构建工具，它可以快速地构建现代化的 Web 应用程序。它支持多种开发语言，包括 Javascript。

在本文中，我们将介绍如何使用 Vite 和 Javascript 创建一个 React 应用程序。我们假设你已经熟悉了 React 和 Javascript 的基础知识。

创建项目

首先，我们需要创建一个新的项目。我们可以使用 npm 或 yarn 命令行工具来创建一个新的项目。

使用 npm 来创建项目：

npm init vite-app my-react-app --template react

或者使用 yarn 来创建项目：

yarn create vite-app my-react-app --template react

在这里，my-react-app 是你的项目名。我们使用 --template react 标志来指定我们的项目是一个 React 应用程序。

这些命令将在当前目录下创建一个新的目录 my-react-app。

运行项目

接下来，我们需要运行项目以启动一个本地服务器。我们可以使用 npm 或 yarn 命令行工具来运行项目。

使用 npm 来运行项目：

npm run dev

或者使用 yarn 来运行项目：

yarn dev

这些命令将启动本地服务器并在浏览器中打开你的应用程序。现在你可以在浏览器中查看你的应用程序。

编写代码

现在，我们已经准备好编写我们的代码了。在 my-react-app/src/App.js 文件中，我们可以编写我们的 React 代码：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

这是一个简单的 React 组件，它将在浏览器中显示一个标题。

渲染应用程序

现在，我们需要将我们的应用程序渲染到页面上。在 my-react-app/src/index.js 文件中，我们可以编写以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这将使用 ReactDOM.render() 方法将我们的 App 组件渲染到 root 元素中。

打包应用程序

最后，我们需要将我们的应用程序打包成一个静态文件，以便我们可以将其部署到生产环境中。

使用 npm 来构建应用程序：

npm run build

或者使用 yarn 来构建应用程序：

yarn build

这些命令将创建一个 dist 目录，其中包含一个压缩后的静态文件 index.html 和一些静态资源。

结论

恭喜！你已经成功地使用 Vite 创建了一个 React 应用程序。现在你可以继续编写自己的应用程序，并使用 Vite 的其他功能来加速你的开发流程。