欢迎来到“reactjs 30 天”挑战的第二天！今天，我们将设置您的开发环境以开始构建 react 应用程序。我们今天选择的工具将使您的开发过程更加顺畅和高效。
为什么设置正确的环境很重要
在深入代码之前，有一个正确配置的环境至关重要。想象一下你要烤一个蛋糕。在开始混合配料之前，您需要确保拥有所有正确的工具：搅拌碗、搅拌器、预热到正确温度的烤箱等。同样，在 web 开发中，从一开始就设置正确的工具将为您节省时间并减少以后的头痛。
vite是什么？
对于我们的开发环境，我们将使用 vite。 vite（发音为“veet”）是一种快速且现代化的构建工具，可为 reactjs 提供出色的开发体验。它以其速度和简单性而闻名，非常适合初学者和经验丰富的开发人员。
设置 vite 的分步指南
让我们逐步完成使用 vite 设置 reactjs 开发环境的步骤。
1。安装 node.js 和 npm
首先，确保您的计算机上安装了 node.js。 node.js 是一个 javascript 运行时，允许您在浏览器之外运行 javascript 代码。除了 node.js，您还可以获得 npm（node package manager），我们将用它来管理项目依赖项。
- 检查 node.js 是否已安装： 打开终端（命令提示符、powershell 或 macos/linux 上的终端）并键入：
node -v
如果安装了 node.js，您将看到版本号。如果没有，您可以从nodejs.org下载。
Linux 安全审计工具，检查 SSH 配置、开放/监听端口、防火墙规则（ufw/iptables/nftables）、失败登录尝试、sudoers 权限...
- 检查 npm 版本： 要检查 npm 是否已安装，请键入：
npm -v
2。使用 vite 创建一个新的 react 项目
一旦 node.js 和 npm 准备就绪，我们就可以使用 vite 创建一个新的 react 项目。请按照以下步骤操作：
- 第 1 步：打开终端： 导航到要创建项目的目录。
- 第 2 步：运行以下命令：
npm create vite@latest
- 第3步：选择您的项目名称：运行命令后，系统会提示您输入项目名称。例如，您可以将其命名为 my-react-app。
- 第四步：选择您的框架：vite 会要求您选择一个框架。从列表中选择 react。
- 第 5 步：选择变体： 当提示选择变体时，选择 javascript。
- 第 6 步：导航到您的项目目录：
cd my-react-app
- 第 7 步：安装依赖项：
3。运行你的 react 项目
现在项目已设置完毕，让我们运行它以确保一切正常。
- 第1步：启动开发服务器：
npm run dev
- 第 2 步：打开浏览器：运行命令后，您将看到如下输出：
VITE v3.0.0 ready in 150 ms Local: http://localhost:3000/ Network: http://192.168.1.100:3000/
- 第3步：访问url：在浏览器中打开http://localhost:3000/。您应该看到默认的 vite react 模板页面。
现实生活示例：设置您的工作空间
将此过程想象为在办公室中建立一个新的工作空间。您已经有了办公桌 (node.js)、工具 (npm) 和项目文件（react 应用程序）。现在，您可以开始工作了！
下一步是什么？
现在您的开发环境已经设置完毕，您可以开始使用 react 进行构建了！明天，我们将深入研究 jsx 以及 react 如何在页面上渲染元素。
请记住，设置环境只是开始。有了坚实的基础，您现在可以在我们应对挑战的过程中专注于编写干净、高效的代码。
最后的想法
从一开始就准备好您的环境可确保顺利的开发体验。借助 vite，您将在编码时受益于更快的构建和即时反馈，让您的 reactjs 学习之旅更加愉快。
