如何使用Vite建立一个React项目

yarn create vite

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
- create-vite
- cva
? Project name: » vite-project

digital-ocean-vite

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

cd digital-ocean-vite

yarn

Output
success Saved lockfile.
Done in 43.26s.

yarn run dev

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

yarn run dev --host

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

ls src/

Output
App.css
App.jsx
assets
index.css
main.jsx

rm src/App.css
rm src/App.jsx
rm src/index.css

rm -r src/assets

ls src/

Output
main.jsx

nano src/main.jsx

/src/main.jsx -> 主文件.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

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

nano src/App.jsx

/src/App.jsx的内容应该用中文原生方式进行改写

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

。

保存并关闭App.jsx文件。

请使用以下命令再次运行开发服务器：

yarn run dev --host

现在，请在您的浏览器中打开或刷新 http://localhost:3000 来访问一个空白页面，上面会显示“Hello World”的文本。

在这一步中，你从Vite项目中删除了一些默认文件。接下来，你将使用新组件、CSS文件和图像文件构建一个基本应用程序。

第5步 – 创建一个基本的应用程序

在这一步中，您将通过创建一个基本应用程序来创建组件、添加CSS文件和链接图像。首先退出开发服务器。

在接下来的小节中，您将为您的React应用程序创建一个新的组件。

创建一个组件

创建一个新组件可以使您的项目更具模块化。您将把所有组件添加到组件目录中，以保持整理有序。

使用以下命令在src/中创建一个名为components的新目录：

mkdir src/components

下一步，在src/components/目录下使用以下命令创建一个名为Welcome.jsx的新文件：

nano src/components/Welcome.jsx

将以下代码添加到 Welcome.jsx 文件中。

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

上述代码将创建一个称为Welcome的新功能性React组件。export default前缀告诉JavaScript将此函数作为默认导出。

具有类名为wrapper的div标签允许您在CSS中定位此部分。h1和p标签将在屏幕上显示该消息。

保存并关闭文件。

接下来，在你的App.jsx文件中将引用这个新的组件。

使用以下命令打开App.jsx文件：

nano src/App.jsx

用突出显示的代码更新App.jsx的内容。

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

这行代码将会导入Welcome.jsx文件到应用程序，并将新的组件链接到函数体内。完成后，保存并关闭文件。

在以下的子部分中，你将为你的应用程序添加一张图片。

加入一张图片

在应用程序开发中，向React添加图像是一个常见的用例。

在src/目录下使用以下命令创建名为img的新目录：创建一个新目录，目录名为img

mkdir src/img

使用此命令导航到您的src/img目录。

cd src/img

你将把这张萨米的图片下载到src/img文件夹中。

使用wget命令下载图像。

wget https://html.sammy-codes.com/images/small-profile.jpeg

使用以下命令重命名图像：

mv small-profile.jpeg sammy.jpeg

这个命令将图像文件从small-profile.jpeg重命名为sammy.jpeg，以后引用时会更加方便。

使用该命令返回到您的根目录。

cd ../../

接下来，你将更新Welcome.jsx文件，将其链接到这张图片。打开文件：

nano src/components/Welcome.jsx

通过添加下划线标出的行，在你的Welcome.jsx文件中进行更新。

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

第一行将图像作为模块导入到React中。

在函数体内的另一行将创建一个新的 标签，并将 src 属性链接到刚刚导入的图像组件。width 和 height 属性将将相应的图像属性设置为 200 像素。

保存并关闭Welcome.jsx文件。

接下来，你将在你的项目中添加CSS。

添加CSS

在这个子部分中，您将向项目中添加一个自定义的CSS文件来为您的应用程序设置样式。

使用以下命令在src/目录下创建一个名为css的新目录。

mkdir src/css

现在，在src/css中新建一个名为main.css的CSS文件。

nano src/css/main.css

将以下代码添加到main.css文件中：

body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

在上述CSS中，为整个页面设置了一个网格布局，并将项目放置在居中位置。你还设置了字体家族和背景颜色。

.wrapper类将选择您的Welcome.jsx文件中的包装器div。这个类的样式将执行以下操作：

• Set a background color.
• Add padding of 20 pixels.
• Add rounder corners of 10 pixels.

h1选择器将针对HTML中的标签进行目标定位，并将其颜色设置为紫色的一种阴影色调。

完成后，保存并关闭main.css文件。

接下来，你将从Welcome.jsx组件引用新的CSS文件。打开Welcome.jsx文件。

nano src/components/Welcome.jsx

用突出显示的行更新文件的内容。

import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

这行代码将CSS文件作为组件的模块进行导入。你可能需要根据你的项目文件夹更新代码行中正确的文件路径。

完成后，请保存并关闭Welcome.jsx文件。

在下面的子部分中，您将更改您的应用程序的应用程序标题栏。

改变应用标题栏

默认情况下，Vite应用程序在浏览器窗口标题栏中显示文本“Vite + React”。在此步骤中，您将将其更改为描述性标题。

在您的根目录中打开index.html。

nano index.html

更新标题标签，将高亮文本添加进去。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

将这段文本用您自定义的应用标题替换默认的Vite应用标题栏。

保存并关闭index.html文件。

如果需要重新运行开发服务器，请运行以下命令：

yarn run dev --host

经过所有的改变之后，访问 http://localhost:5173 来查看你的应用程序。你将会看到一个新版本的应用程序。

当你准备开始构建时，你可以关闭开发服务器。

你现在已经添加了一张图片，更改了样式，并制作了一个精美的用户界面。在下一个也是最后一步中，你将构建一个优化的应用程序包以进行部署。

第六步——生产建设

在这一步中，您将构建一个已优化的应用程序包，准备部署到服务器上。要创建一个构建，将以下命令输入终端：

yarn run build

该命令将创建一个包含经过压缩的源文件的新目录，您可以将其部署到服务器上用于生产环境。

你将会收到一个类似这样的输出。

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

您现在可以将“dist”文件夹的内容部署到在线服务器上。如果您有Apache或Nginx服务器，您可以手动上传这些内容。您还可以使用应用平台运行构建脚本并自动生成构建文件。如果要将您的React应用部署到Silicon Cloud的应用平台上，请按照我们的教程《如何将React应用程序部署到Silicon Cloud应用平台》进行操作。

結論

在这个教程中，你使用 Vite 工具创建了一个新的 React App。你使用 yarn create vite 命令搭建了一个全新的 React App。删除了模板代码后，通过添加自定义图像、CSS文件和更改标题栏来创建你的组件。最后，使用 yarn run build 命令创建了一个优化的打包文件，准备部署使用。

现在你已经用Vite构建了一个React应用程序，看看在《如何使用React.js编码系列》中还能用React做什么，同时探索其他关于React的教程。