設定 React on Linux 的實驗室

發行項
04/25/2022

重要

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

實驗室方案設定	指示
Marketplace 映像	啟用 'Ubuntu Server 18.04 LTS' 映像。

實驗室設定

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

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

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

範本機器設定

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

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

安裝開發工具

安裝您慣用的網頁瀏覽器。
安裝 Node.js。
```
sudo apt install nodejs
```
安裝節點套件管理員，其將用於安裝 React、Redux 和 JSX。
```
sudo apt install npm
```
安裝 Visual Studio Code。
安裝適用於 Visual Studio Code 的 React Native 工具延伸模組。
或者，安裝延伸模組以使用 Redux 和 JSX 進行開發。

Create React App 是建立 React 應用程式的正式支援方式，而且若您使用 npm 5.2 和更新版本，則不需要進一步設定。如需如何使用 Create React App 的詳細資訊，請參閱其入門文件。

React 型網站所需的其他元件會使用 NPM 安裝到特定應用程式。例如，輸入下列命令來安裝 Redux 和 JSX 程式庫：

npm install react-redux
npm install react-jsx

安裝偵錯工具延伸模組

為您的瀏覽器安裝 React Developer Tools 延伸模組，以便您可以檢查 React 元件並記錄效能資訊。

若要在開發模式中執行應用程式，請使用 npm start 內建命令。本機和網路 URL 將會列示在命令輸出中。如需如何使用 HTTPS 而非 HTTP 的詳細資訊，請參閱 Create React App：在開發中使用 HTTPS。

更新防火牆設定

官方 Ubuntu 組建已安裝 iptable，而且預設會允許所有傳入流量。不過，如果您使用具有更嚴格防火牆的 VM，請新增輸入規則以允許流量流向 NodeJS 伺服器。下列範例會使用 iptables 允許流量流向連接埠 3000。

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

重要

授課者必須使用範本 VM 或其他實驗室 VM 來存取學生的網站。

下一步

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

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

共用方式為