如何使用Vite创建本地反应环境-DEV365 开发者社区

您已经努力学习JavaScript。您现在准备好开始学习反应了吗？本文教授了如何使用Vite创建本地环境，从而提供了实践方法的实用方法！

介绍

如果您想将JavaScript技能提升到一个新的水平，那么学习React是一个好方法。但是从哪里开始呢？好吧，创建本地环境是一种实用的方法，可以在练习反应方面获得实践经验！

在本文中，您将学习如何使用Vite（旨在快速有效的构建工具和开发服务器）创建本地环境。

本文涵盖：

有关如何创建Vite Project的分步说明
删除默认的样板
创建简单的反应组件
添加基本CSS样式。
使用Netlify（可选）部署项目

在本教程结束时，您将对使用VITE创建本地React环境有深入的了解！

什么是Vite？

vite是一种构建工具和开发服务器，旨在快速有效。它通常用于开发具有React，Vue和Svelte等框架的现代Web应用程序。

vite提供了一种创建本地开发环境的快速简便的方法，使开发人员可以在安全且受控的设置中测试和试验其代码。

使用Vite，开发人员可以使用热模块更换之类的功能，从而可以更快地开发和测试周期。总体而言，Vite是一种强大的工具，可以帮助开发人员简化其工作流程并提高其生产力。

先决条件

我们将使用Node.js和node package manager使用VS code editor来创建本地开发环境。

命令行（bash终端）

然后，我们将使用命令行创建一个Vite项目，选择JavaScript并进行反应。

（可选）Netlify

最后，我们将部署React项目从命令行到NetLify。

创建一个Vite项目

在VS代码中，使用Bash终端，输入以下命令：

npm create vite@latest

如果成功，您将被要求命名该项目（默认名称为vite-project）。

? Project name: vite-project

接下来，将要求您使用箭头键选择一个框架。我们将选择React，按Enter键提交。

Select a framework:
     Vanilla
     Vue
     React
     Preact
     Lit
     Svelte
     Others

然后，您将被要求选择一个变体。我们将选择JavaScript，然后按Enter键提交。

Select a variant:
     JavaScript
     TypeScript
     JavaScript + SWC
     TypeScript + SWC

您现在将有一个脚手架项目，并且路径将显示（我的是C：\ users \ larocca \ vite-project）。

最后，我们被要求将目录更改为项目，然后运行NPM安装和NPM Run Dev。

Done. Now run:

     cd vite-project
     npm install
     npm run dev

按照这些说明，设置了您的本地反应开发环境！

悬停在bash终端中的本地地址上，使用“ ctrl + click”查看项目。

  VITE v4.1.4  ready in 495 ms

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

在VS代码编辑器中编辑项目并启动您的React编码实践：

File
打开文件夹
使用创建的脚手架项目的路径，选择您的项目文件夹（我的是C：\ users \ larocca \ vite-project）

编辑项目

打开项目文件夹后，您应该看到以下文件：

我们将首先用“ Hello World！”替换“ Vite + React”文本。

导航到以下文件以更新：

SCR
app.jsx

现在，找到<h1>元素（您可以使用查找ctrl + f），然后替换文本说“你好！”

替换文本后，保存项目（CTRL + S）。现在，您将在浏览器中看到您的更改！当您对代码进行更改时，每次保存工作时，它都会自动在浏览器中更新（类似于Live Server）

Vite末端快捷方式

以下是您可以在Bash终端中使用的Vite快捷方式列表。退出应用程序后，请使用 npm运行dev 再次开始。

  Shortcuts
  press r to restart the server
  press u to show server url   
  press o to open in browser   
  press c to clear console     
  press q to quit

卸下默认样板

现在已经建立了本地反应环境，让我们看一下默认的样板，看看我们可以删除的内容。

app.css and Index.css

app.css和index.css？

之间有什么区别

在React，App.css是一个文件，您可以在其中为特定应用程序组件（例如标头或页脚）编写样式。

另一方面，index.css用于影响整个应用程序的样式，例如背景颜色或字体大小。

因此，如果您想设计特定组件，则可以使用app.css;如果您想设置整个应用程序，则可以使用index.css。

随时可以在app.css和index.css文件中删除或删除内容。

然后，在index.css中，我们将添加以下格式代码：

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

app.jsx和main.jsx

在app.jsx文件中，我们将删除应用程序函数中的一些代码。

app.jsx文件现在应该看起来像这样：

import './App.css'

function App() {

  return (
    <div className="App">

    </div>
  )
}

export default App

反应组件

我们将创建一些简单的反应组件。我们将制作的React组件是返回HTML代码块的JavaScript函数。

然后，我们将导入我们制作的React组件中的Main.jsx文件以渲染。

建立我们的反应环境

删除默认样板后，我们将在SRC文件夹的内部创建一个组件文件夹。

创建简单的反应组件

现在，我们将制作两个简单的反应组件，一个导航栏和一个主部分。

一开始语法似乎有些奇怪（对我来说很奇怪），但是代码的概念很简单。我们将网站页面分为部分，并在JavaScript中编写HTML代码。

Navbar

我们在组件文件夹中创建了一个名为“ navbar”的新JSX文件。然后，我们编写一个名为Navbar的函数，该功能重新调整了HTML代码的块。最后，我们包括JavaScript代码以报告功能。

export default function Navbar() {
    return (
            <nav>
                <div>My React website</div>
                <ul>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>Page 3</li>
                </ul>
            </nav>
    )
}

主要的

以类似于我们编写的Navbar函数类似的方式，我们将：

我们创建了一个新的JSX文件，标题为“ MAIN”文件夹
然后，我们编写一个名为main的函数，该函数重新调整了HTML代码的块
包括以报告功能的JavaScript代码

export default function Main() {
    return (
            <main>
                <h1>Let's practice some React!</h1>
                <h3>Paragraph 1</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores pariatur officiis magnam, optio reprehenderit labore culpa repudiandae voluptates, quos et assumenda placeat maxime non nam.</p>
                <h3>Paragraph 2</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores, sed accusantium nobis vero ut laborum.</p>
            </main>
    )
}

app.jsx

在app.jsx文件中，我们将首先通过将以下代码添加到文件：
来导入我们创建的React组件

import './App.css'
import Navbar from './components/Navbar'
import Main from './components/Main'

应用功能

我们现在将编写一个应用程序功能，该功能将返回Navbar和Main组件。注意语法。这些组件以大写字母的定制命名html元素写成。

function App() {

  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  )
}

export default App

因为app.jsx已经在文件底部包含“导出默认应用”，我们可以从函数的开头将其排除。

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>,
)

渲染的网页应该看起来如下：

基本CSS样式

现在让我们添加一些基本的CSS样式。

我们已经将以下代码添加到index.css：

 body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

现在，让我们将以下基本CSS样式添加到应用程序CSS文件：

nav, nav ul {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

nav li {
  list-style-type:none;
  margin: 0 15px;
}

nav li:hover {
  color: lightgreen;
  cursor: pointer;
}

main {
  border: 1px solid red;
  padding: 0 15px;
}

在CSS样式之后，渲染的网页应看起来如下：

注意： 添加红色边框颜色是为了视觉HTML元素的目的。随时重新制作或删除它们。

恭喜！

您现在已经成功地使用Vite创建了一个本地环境来练习反应编码！

使用NetLify（可选）部署项目

在Vite网站上，我使用“ deploying a static website guide”指令使用Netlify部署我的实践React网站。

在短短几个步骤中，您可以部署练习网站：

Netlify

安装Netlify Cli。
使用NTL INIT创建一个新站点。
使用NTL部署部署。

注意： 要简化，我们将选择手动创建和部署网站。

# Install the Netlify CLI
$ npm install -g netlify-cli

# Create a new site in Netlify
$ ntl init

您的命令行应看起来与此相似：

现在我们被告知首先运行我们的构建命令：

$ npm run build

我们现在可以通过运行NTL部署来预览我们的网站。

注意： 选择出版目录的区域。

# Deploy to a unique preview URL
$ ntl deploy

您部署了一旦实时，请在网站草案上悬停在网站草案上时使用“ Ctrl + Click”预览。

NetLify CLI将与您共享一个预览URL。当您准备进入生产时，使用Prod Flag。