重要
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 Community（最新版本）' 映像已安裝
- 安裝您慣用的網頁瀏覽器。 映像預設已安裝 Internet Explorer。
- 流覽至 Node.js 網站，然後選取 [ 下載] 按鈕。 您可以使用最新的長期服務 (LTS) 版本、具有該最新功能的目前版本或舊版本。 安裝 NodeJS 也會安裝 Node Package Manager，其將用於安裝 React、Redux 和 JSX。
- 視需要將Visual Studio 2019更新為最新版本。
React 型網站所需的其他元件會使用 NPM 安裝到特定應用程式。 若要新增 NPM 套件，請參閱 在 Visual Studio 中管理 NPM 套件。
例如，如果在專案中使用 Node.js Interactive Window ，請輸入下列命令來安裝 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 元件並記錄效能資訊。
- 適用於 Microsoft Edge 的 React Developer Tools 附加元件
- React Developer Tools Chrome 擴充功能
- React 開發人員工具 FireFox 附加元件
更新防火牆設定
根據預設，系統會封鎖 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。
當您設定實驗室時，請參閱下列文章：