Konfigurowanie laboratorium dla platformy React w systemie Linux

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 przewidywalne zarządzanie stanem dla aplikacji JavaScript i jest często używana w połączeniu z 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 Code dla środowiska programistycznego, narzędzia i biblioteki potrzebne dla klasy deweloperów internetowych platformy React.

Konfiguracja laboratorium

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

Ustawienia planu laboratorium

Po utworzeniu subskrypcji platformy Azure możesz utworzyć nowy plan laboratorium w usługach 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 Azure Marketplace, zobacz Określanie obrazów Azure Marketplace dostępnych dla twórców laboratorium.

Ustawienia laboratorium

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

Zalecamy przetestowanie obciążeń, aby sprawdzić, czy wymagany jest większy rozmiar. Aby uzyskać więcej informacji na temat poszczególnych rozmiarów, zobacz Rozmiar maszyn wirtualnych.

Konfiguracja maszyny do szablonów

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

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

Instalowanie narzędzi programistycznych

1. Zainstaluj preferowaną przeglądarkę internetową.

2. Zainstalowanie środowiska Node.js.

   sudo apt install nodejs
   

3. Zainstaluj Menedżer pakietów Node, które będą używane do instalowania oprogramowania React, Redux i JSX.

   sudo apt install npm
   

4. Zainstalowanie programu Visual Studio Code.

5. Zainstaluj Reactive Native Tools extension for Visual Studio Code.

6. Opcjonalnie zainstaluj rozszerzenia na potrzeby programowania za pomocą oprogramowania Redux i JSX.

Tworzenie aplikacji React to oficjalnie obsługiwany sposób tworzenia aplikacji React i nie wymaga dalszej konfiguracji, jeśli używasz narzędzia npm 5.2 lub nowszego. Aby uzyskać więcej instrukcji dotyczących korzystania z funkcji Tworzenia aplikacji React, zobacz dokumentację wprowadzającą .

Inne składniki potrzebne do witryny internetowej opartej na platformie React są instalowane przy użyciu narzędzia NPM w określonej aplikacji. Na przykład wprowadź następujące polecenia, aby zainstalować biblioteki Redux i JSX:

npm install react-redux
npm install react-jsx

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.

• Dodatek React Developer Tools Edge
• Rozszerzenie React Developer Tools Dla programu Chrome
• Dodatek React Developer Tools FireFox

Aby uruchomić aplikację w trybie programowania, użyj wbudowanego npm start polecenia. Adresy URL lokalne i sieciowe zostaną wyświetlone w danych wyjściowych polecenia. Aby uzyskać więcej informacji na temat używania protokołu HTTPS zamiast protokołu HTTP, zobacz Tworzenie aplikacji React: Korzystanie z protokołu HTTPS w środowisku deweloperskich.

Aktualizowanie ustawień zapory

Oficjalne kompilacje systemu Ubuntu mają zainstalowany iptables i domyślnie dopuszczają cały ruch przychodzący. Jeśli jednak używasz maszyny wirtualnej, która ma bardziej restrykcyjną zaporę, dodaj regułę ruchu przychodzącego, aby zezwolić na ruch do serwera NodeJS. W poniższym przykładzie użyto iptables, aby zezwolić na ruch na porcie 3000.

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

Następne kroki

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

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

• Ustaw limit
• Ustawianie harmonogramu
• Dodawanie użytkowników
• Linki do rejestracji poczty e-mail dla uczniów