你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Windows 上设置 React 实验室

项目
10/27/2023

注意

本文引用了实验室计划中可用的功能，该计划取代了实验室帐户。

React 是用于生成用户界面 (UI) 的常用 JavaScript 库。 React 是用于为网站创建可重用组件的声明性方法。还有很多用于基于 JavaScript 的前端开发的其他常用库。我们在创建实验室时会使用其中几个库。 Redux 是一个库，可为 JavaScript 应用提供可预测的状态容器，通常用于补充 React。 JSX 是 JavaScript 的库语法扩展，通常与 React 配合使用，用于描述 UI 应有的外观。 NodeJS 是为 React 应用程序运行 Web 服务器的一种简便方法。

本文将介绍如何安装用于开发环境的 Visual Studio 2019、工具，以及 React Web 开发课程所需的库。

实验室配置

若要设置此实验室，需要有 Azure 订阅和实验室计划才能开始。如果没有 Azure 订阅，请在开始之前创建一个免费帐户。

实验室计划设置

在获取 Azure 订阅后，就可以在 Azure 实验室服务中创建新的实验室计划。若要详细了解如何新建实验室计划，请参阅有关如何设置实验室计划的教程。也可以使用现有实验室计划。

如下表所述启用实验室计划设置。若要详细了解如何启用 Azure 市场映像，请参阅指定可供实验室创建者使用的 Azure 市场映像。

实验室帐户设置	Instructions
市场映像	启用“Windows Server 2019 (x64) 上的 Visual Studio 2019 Community（最新版）”映像。

实验室设置

有关如何创建实验室的说明，请参阅教程：设置实验室。创建实验室时，请使用以下设置。

实验室设置	值
虚拟机大小	中型

建议测试工作负荷，以了解是否需要更大的大小。有关各种大小的详细信息，请参阅 VM 大小调整。

模板计算机配置

本部分的步骤说明了如何完成以下操作来设置模板 VM：

安装开发工具。
为 Web 浏览器安装调试器扩展。
更新防火墙设置。

安装开发工具

“Windows Server 2019 (x64) 上的 Visual Studio 2019 Community (最新版)”映像中已经安装了 Visual Studio 2019 所需的 Node.js 开发工作负载。

安装首选 Web 浏览器。默认情况下，该映像中已安装 Internet Explorer。
导航到 Node.js 网站，选择“下载”按钮。可以使用最新的长期服务 (LTS) 版本、具有最新功能的当前版本，或以前的版本。安装 NodeJS 也会安装 Node 包管理器，它将会用于安装 React、Redux 和 JSX。
如果需要，请将 Visual Studio 2019 更新到最新版本。

基于 React 的网站所需的其他组件通过 NPM 安装到特定应用程序中。若要添加 NPM 包，请参阅在 Visual Studio 中管理 NPM 包。

例如，如果在项目中使用 Node.js 交互窗口，请输入以下命令来安装 React、Redux 和 JSX 库：

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

若要在 Visual Studio 中创建第一个使用 React 的 Node.js 应用，请参阅教程：在 Visual Studio 中创建 Node.js 和 React 应用。

安装调试器扩展

为浏览器安装 React 开发人员工具扩展，这样就可以检查 React 组件并记录性能信息。

更新防火墙设置

默认会阻止发往 Node.js 服务器的入站流量。如果你要访问正在运行的学生网站，请添加一个入站防火墙规则以允许流量。查看“应用程序端口”项目属性，以确定调试期间将使用哪个端口。以下示例使用 New-NetFirewallRule PowerShell cmdlet 来允许访问端口 1337。

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

重要

教师必须使用模板 VM 或其他实验室 VM 来访问学生的网站。

成本

接下来介绍此课程的示例成本估算。假设你的班上有 25 名学生。每名学生都有 20 小时的计划课程时间。除计划的课堂时间外，每名学生还有另外 10 小时的配额，用于完成家庭作业或分配给他们的任务。我们所选的虚拟机大小为“中等”，包含 55 个实验室单位。

25 名学生 × (20 个计划小时 + 10 个配额小时) × 55 个实验室单位 × 0.01 美元/小时 = 412.50 美元

重要

成本估算仅用于示例。有关最新定价信息，请参阅 Azure 实验室服务定价。

后续步骤

现在可以将模板映像发布到实验室。有关详细信息，请参阅发布模板 VM。

设置实验室时，请参阅以下文章：

通过