在 Linux 上設定 React 的實驗室

  • 發行項

注意

本文參考實驗室方案中 可用的 功能，這些功能取代了實驗室帳戶。

React 是建置使用者介面 （UI） 的熱門 JavaScript 程式庫。 React 是一種宣告式方式，可為您的網站建立可重複使用的元件。 JavaScript 型前端開發有許多其他熱門程式庫。 建立實驗室時，我們會使用這些程式庫的其中一些。 Redux 是一個程式庫，可為 JavaScript 應用程式提供可預測的狀態容器，而且通常會用於與 React 相稱。 JSX 是 JavaScript 的程式庫語法延伸模組，通常用於 React 來描述 UI 的外觀。 NodeJS 是針對 React 應用程式執行 Web 服務器的便利方式。

本文說明如何為開發環境、React Web 開發類別所需的工具和程式庫安裝 Visual Studio Code 。

實驗室設定

若要設定此實驗室，您需要 Azure 訂用帳戶才能開始使用。 如尚未擁有 Azure 訂用帳戶，請在開始之前先建立免費帳戶。

實驗室計畫設定

擁有 Azure 訂用帳戶之後，您可以在 Azure 實驗室服務中建立新的實驗室方案。 如需建立新實驗室計畫的詳細資訊，請參閱如何設定實驗室計畫的教學 課程 。 您也可以使用現有的實驗室計畫。

啟用您的實驗室計畫設定，如下表所述。 如需如何啟用 Azure Marketplace 映射的詳細資訊，請參閱 指定實驗室建立者 可用的 Azure Marketplace 映射。

實驗室計畫設定 指示
Marketplace 映像 啟用 'Ubuntu Server 18.04 LTS' 映射。

實驗室設定

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

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

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

範本電腦設定

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

  1. 安裝開發工具。
  2. 安裝網頁瀏覽器的偵錯工具擴充功能。
  3. 更新防火牆設定。

安裝開發工具

  1. 安裝您慣用的網頁瀏覽器。

  2. 安裝 Node.js。

    sudo apt install nodejs

  3. 安裝 Node 封裝管理員 ，用於安裝 React、Redux 和 JSX。

    sudo apt install npm

  4. 安裝 Visual Studio Code。

  5. 安裝 Visual Studio Code 的回應式原生工具擴充功能。

  6. 選擇性地安裝延伸模組以使用 Redux 和 JSX 進行開發。

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

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

npm install react-redux
npm install react-jsx

安裝偵錯工具延伸模組

安裝瀏覽器的 React 開發人員工具延伸模組，以便檢查 React 元件並記錄效能資訊。

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

更新防火牆設定

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

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

重要

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

成本

讓我們來說明此類別的範例成本估計值。 我們所選擇的虛擬機器大小是 Small ，也就是 20 個實驗室單位。

對於 25 名學生的班級，具有 20 小時的排程課程時間和 10 小時的作業或作業配額，成本估計為：

25 名學生×（20 個預定時數 + 10 個配額小時） × 20 個實驗室單元×每小時 0.01 美元 = 150.00 美元

重要

成本估計僅供範例之用。 如需目前的定價資訊，請參閱 Azure 實驗室服務定價 。

下一步

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

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