在 Windows 上設定 React 的實驗室

發行項
05/16/2021

重要

Azure Lab Services 將於 2027 年 6 月 28 日淘汰。如需詳細資訊，請參閱淘汰指南。

注意

本文參考實驗室計畫中可用的功能，取代實驗室帳戶。

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 Marketplace 映像的詳細資訊，請參閱指定實驗室建立者可用的 Azure Marketplace 映像。

實驗室帳戶設定	指示
Marketplace 映像	啟用「Windows Server 2019 (x64) 上的 Visual Studio 2019 社群 (最新版本)」映像。

實驗室設定

如需如何建立實驗室的指示，請參閱教學課程：設定實驗室。建立實驗室時，請使用下列設定。

實驗室設定	值
虛擬機器大小	中

建議您測試工作負載，查看是否需要更大的大小。如需每個大小的詳細資訊，請參閱 VM 調整大小。

範本機器設定

本節中的步驟說明如何完成下列作業來設定範本 VM：

安裝開發工具。
安裝網頁瀏覽器的偵錯工具延伸模組。
更新防火牆設定。

安裝開發工具

「Windows Server 2019 (x64) 上的 Visual Studio 2019 社群 (最新版本)」映像已安裝 Visual Studio 2019 所需的 Node.js 開發工作負載。

安裝您慣用的網頁瀏覽器。映像預設已安裝 Internet Explorer。
瀏覽至 Node.js 網站，然後選取 [下載] 按鈕。您可以使用最新的長期服務 (LTS) 版本、具有該最新功能的目前版本或舊版本。安裝 NodeJS 時會一併安裝節點套件管理員，其將用於安裝 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 Developer Tools 延伸模組，方便您檢查 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 來存取學生的網站。

下一步

範本映像現在可以發佈至實驗室。如需詳細資訊，請參閱發佈範本 VM。

當您設定實驗室時，請參閱下列文章：

共用方式為