Konfigurowanie laboratorium dla platformy React w systemie Windows

  • Artykuł

Uwaga

Ten artykuł odwołuje się do funkcji dostępnych w planach laboratorium, które zastąpiły konta laboratorium.

React to popularna biblioteka języka JavaScript do tworzenia interfejsów użytkownika. React to deklaratywny sposób tworzenia składników wielokrotnego użytku dla witryny internetowej. Istnieje wiele innych popularnych bibliotek do tworzenia frontonu opartego na języku JavaScript. Użyjemy kilku z tych bibliotek podczas tworzenia laboratorium. Redux to biblioteka, która zapewnia przewidywalny kontener stanu dla aplikacji JavaScript i jest często używana w uzupełniuj platformę React. JSX to rozszerzenie składni biblioteki dla języka JavaScript często używane z platformą React w celu opisania wyglądu interfejsu użytkownika. NodeJS to wygodny sposób uruchamiania serwera internetowego dla aplikacji React.

W tym artykule pokazano, jak zainstalować program Visual Studio 2019 dla środowiska programistycznego oraz narzędzia i biblioteki potrzebne dla klasy deweloperów internetowych platformy React.

Konfiguracja laboratorium

Aby skonfigurować to laboratorium, potrzebujesz subskrypcji platformy Azure i planu laboratorium, aby rozpocząć pracę. Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Ustawienia planu laboratorium

Po uzyskaniu subskrypcji platformy Azure możesz utworzyć nowy plan laboratorium w usłudze Azure Lab Services. Aby uzyskać więcej informacji na temat tworzenia nowego planu laboratorium, zobacz samouczek dotyczący konfigurowania planu laboratorium. Możesz również użyć istniejącego planu laboratorium.

Włącz ustawienia planu laboratorium zgodnie z opisem w poniższej tabeli. Aby uzyskać więcej informacji na temat włączania obrazów witryny Azure Marketplace, zobacz Określanie obrazów witryny Azure Marketplace dostępnych dla twórców laboratorium.

Ustawienie konta laboratorium Instrukcje
Obraz z witryny Marketplace Włącz obraz "Visual Studio 2019 Community (najnowsza wersja) w systemie Windows Server 2019 (x64)".

Ustawienia laboratorium

Aby uzyskać instrukcje dotyczące tworzenia laboratorium, zobacz Samouczek: konfigurowanie laboratorium. Podczas tworzenia laboratorium użyj następujących ustawień.

Ustawienie laboratorium Wartość
Rozmiar maszyny wirtualnej Medium

Zalecamy przetestowanie obciążeń, aby sprawdzić, czy wymagany jest większy rozmiar. Aby uzyskać więcej informacji na temat każdego rozmiaru, zobacz Ustalanie rozmiaru maszyny wirtualnej.

Konfiguracja maszyny szablonu

W krokach w tej sekcji pokazano, jak wykonać następujące czynności, aby skonfigurować maszynę wirtualną szablonu:

  1. Zainstaluj narzędzia programistyczne.
  2. Zainstaluj rozszerzenia debugera dla przeglądarki internetowej.
  3. Zaktualizuj ustawienia zapory.

Instalowanie narzędzi programistycznych

Obraz "Visual Studio 2019 Community (najnowsza wersja) w systemie Windows Server 2019 (x64)" ma już zainstalowane wymagane obciążenie programistyczne Node.js dla programu Visual Studio 2019.

  1. Zainstaluj preferowaną przeglądarkę internetową. Obraz ma domyślnie zainstalowany program Internet Explorer.
  2. Przejdź do witryny internetowej Node.js i wybierz przycisk Pobierz . Możesz użyć najnowszej wersji usługi długoterminowej (LTS), bieżącej wersji z najnowszymi funkcjami lub poprzedniej wersji. Zainstalowanie środowiska NodeJS spowoduje również zainstalowanie Menedżer pakietów Node, który będzie używany do instalowania oprogramowania React, Redux i JSX.
  3. W razie potrzeby zaktualizuj program Visual Studio 2019 do najnowszej wersji.

Inne składniki potrzebne do witryny internetowej opartej na platformie React są instalowane przy użyciu narzędzia NPM w określonej aplikacji. Aby dodać pakiety NPM, zobacz Zarządzanie pakietami NPM w programie Visual Studio.

Jeśli na przykład używasz okna interaktywnego Node.js w projekcie, wprowadź następujące polecenia, aby zainstalować biblioteki React, Redux i JSX:

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Aby utworzyć swój pierwszy plik Node.js z aplikacją React w programie Visual Studio, zobacz Samouczek: tworzenie aplikacji Node.js i React w programie Visual Studio.

Instalowanie rozszerzeń debugera

Zainstaluj rozszerzenia react developer tools dla przeglądarki, aby można było sprawdzić składniki react i rejestrować informacje o wydajności.

Aktualizowanie ustawień zapory

Domyślnie ruch przychodzący do serwera Node.js zostanie zablokowany. Jeśli chcesz uzyskać dostęp do witryny internetowej ucznia podczas jej działania, dodaj regułę zapory powiązanej, aby zezwolić na ruch. Przyjrzyj się właściwości projektu Port aplikacji, aby zobaczyć, który port będzie używany podczas debugowania. W poniższym przykładzie użyto polecenia cmdlet New-NetFirewallRule programu PowerShell, aby zezwolić na dostęp do portu 1337.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

Ważne

Nauczyciele muszą używać maszyny wirtualnej szablonu lub innej maszyny wirtualnej laboratorium, aby uzyskać dostęp do witryny internetowej ucznia.

Koszt

Omówimy przykładowy szacowany koszt dla tej klasy. Załóżmy, że masz klasę 25 uczniów. Każdy uczeń ma 20 godzin zaplanowanego czasu zajęć. Kolejne 10 godzin przydziału dla pracy domowej lub przydziałów poza zaplanowanym czasem zajęć jest przydzielane każdemu uczniowi. Wybrany rozmiar maszyny wirtualnej to Średni, czyli 55 jednostek laboratorium.

  • 25 studentów × (20 zaplanowanych godzin + 10 godzin przydziału) × 55 Lab Units × USD0,01 na godzinę = 412,50 USD

Ważne

Oszacowanie kosztów jest przeznaczone tylko do celów przykładowych. Aby uzyskać bieżące informacje o cenach, zobacz Cennik usług Azure Lab Services.

Następne kroki

Obraz szablonu można teraz opublikować w laboratorium. Aby uzyskać więcej informacji, zobacz Publikowanie maszyny wirtualnej szablonu.

Podczas konfigurowania laboratorium zapoznaj się z następującymi artykułami: