在 Linux 上设置 React 实验室
重要
Azure 实验室服务将于 2027 年 6 月 28 日停用。 有关详细信息，请参阅停用指南。
注意
本文引用了实验室计划中可用的功能，该计划取代了实验室帐户。
React 是用于生成用户界面 (UI) 的常用 JavaScript 库。 React 是用于为网站创建可重用组件的声明性方法。 还有很多用于基于 JavaScript 的前端开发的其他常用库。 我们在创建实验室时会使用其中几个库。 Redux 是一个库，可为 JavaScript 应用提供可预测的状态容器，通常用于补充 React。 JSX 是 JavaScript 的库语法扩展，通常与 React 配合使用，用于描述 UI 应有的外观。 NodeJS 是为 React 应用程序运行 Web 服务器的一种简便方法。
本文介绍如何安装用于开发环境的 Visual Studio Code、工具，以及 React Web 开发类所需的库。
实验室配置
若要设置此实验室，你需要具有一个 Azure 订阅才能开始。 如果没有 Azure 订阅，请在开始之前创建一个免费帐户。
实验室计划设置
有了 Azure 订阅后，就可以在 Azure 实验室服务中创建新的实验室计划。 有关如何创建新实验室计划的详细信息，请参阅有关如何设置实验室计划的教程。 也可以使用现有实验室计划。
如下表所述启用实验室计划设置。 若要详细了解如何启用 Azure 市场映像，请参阅指定可供实验室创建者使用的 Azure 市场映像。
| 实验室计划设置 | Instructions |
|---|---|
| 市场映像 | 启用“Ubuntu Server 18.04 LTS”映像。 |
实验室设置
有关如何创建实验室的说明，请参阅教程：设置实验室。 创建实验室时，请使用以下设置。
| 实验室设置 | 值 |
|---|---|
| 虚拟机大小 | 小型 |
建议测试工作负荷，以了解是否需要更大的大小。 有关各种大小的详细信息，请参阅 VM 大小调整。
模板计算机配置
本部分的步骤说明了如何完成以下操作来设置模板 VM：
- 安装开发工具。
- 为 Web 浏览器安装调试器扩展。
- 更新防火墙设置。
安装开发工具
安装首选 Web 浏览器。
安装 Node.js。
sudo apt install nodejs安装 Node 包管理器，它将会用于安装 React、Redux 和 JSX。
sudo apt install npm
创建 React 应用是官方支持的用于创建 React 应用的方法，在使用 npm 5.2 及更高版本的情况下无需进一步配置。 有关如何使用“创建 React 应用”的更多说明，请参阅其入门文档。
基于 React 的网站所需的其他组件通过 NPM 安装到特定应用程序中。 例如，输入以下命令可安装 Redux 和 JSX 库：
npm install react-redux
npm install react-jsx
安装调试器扩展
为浏览器安装 React 开发人员工具扩展，这样就可以检查 React 组件并记录性能信息。
若要在开发模式下运行该应用，请使用 npm start 内置命令。 命令输出中会列出本地 URL 和网络 URL。 若要详细了解如何使用 HTTPS 而不是 HTTP，请参阅创建 React 应用：在开发中使用 HTTPS。
更新防火墙设置
官方 Ubuntu 版本已安装 iptables，默认允许所有传入流量。 但是，如果使用的 VM 具有限制性更强的防火墙，请添加入站规则以允许流量发送到 NodeJS 服务器。 以下示例使用 iptables 来允许流量发送到端口 3000。
sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
重要
教师必须使用模板 VM 或其他实验室 VM 来访问学生的网站。
后续步骤
现在可以将模板映像发布到实验室。 有关详细信息，请参阅发布模板 VM。
设置实验室时，请参阅以下文章：