Nastavení testovacího prostředí pro React v Linuxu

Článek
04/25/2022

Důležité

Služba Azure Lab Services bude vyřazena 28. června 2027. Další informace najdete v průvodci vyřazením.

Poznámka:

Tento článek odkazuje na funkce dostupné v plánech testovacího prostředí, které nahradily účty testovacího prostředí.

React je oblíbená javascriptová knihovna pro vytváření uživatelských rozhraní. React je deklarativní způsob, jak vytvořit opakovaně použitelné komponenty pro váš web. Existuje mnoho dalších oblíbených knihoven pro vývoj front-endu založených na JavaScriptu. Při vytváření našeho testovacího prostředí použijeme několik těchto knihoven. Redux je knihovna, která poskytuje předvídatelný kontejner stavu pro javascriptové aplikace a často se používá při doplňování s Reactem. JSX je rozšíření syntaxe knihovny pro JavaScript, které se často používá s Reactem a popisuje, jak by mělo uživatelské rozhraní vypadat. NodeJS je pohodlný způsob, jak spustit webový server pro aplikaci React.

V tomto článku se dozvíte, jak nainstalovat Visual Studio Code pro vaše vývojové prostředí, nástroje a knihovny potřebné pro vývojovou třídu webu React.

Konfigurace testovacího prostředí

K nastavení tohoto testovacího prostředí potřebujete předplatné Azure, abyste mohli začít. Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

Nastavení plánu testovacího prostředí

Jakmile máte předplatné Azure, můžete ve službě Azure Lab Services vytvořit nový plán testovacího prostředí. Další informace o vytvoření nového testovacího plánu najdete v kurzu o nastavení plánu testovacího prostředí. Můžete také použít existující plán testovacího prostředí.

Povolte nastavení plánu testovacího prostředí, jak je popsáno v následující tabulce. Další informace o povolení imagí z Azure Marketplace najdete v tématu Určení imagí Azure Marketplace dostupných tvůrcům testovacího prostředí.

Nastavení plánu testovacího prostředí	Pokyny
Image z Marketplace	Povolte image Ubuntu Server 18.04 LTS.

Nastavení testovacího prostředí

Pokyny k vytvoření testovacího prostředí najdete v kurzu : Nastavení testovacího prostředí. Při vytváření testovacího prostředí použijte následující nastavení.

Nastavení testovacího prostředí	Hodnota
Velikost virtuálního počítače	Malý

Doporučujeme otestovat úlohy, abyste zjistili, jestli je potřeba větší velikost. Další informace o jednotlivých velikostech najdete v tématu Určení velikosti virtuálního počítače.

Konfigurace počítače šablony

Kroky v této části ukazují, jak provést následující kroky pro nastavení virtuálního počítače šablony:

Nainstalujte vývojové nástroje.
Nainstalujte rozšíření ladicího programu pro webový prohlížeč.
Aktualizujte nastavení brány firewall.

Instalace vývojových nástrojů

Nainstalujte upřednostňovaný webový prohlížeč.
Nainstalujte Node.js.
```
sudo apt install nodejs
```
Nainstalujte node Správce balíčků, který se použije k instalaci Reactu, Reduxu a JSX.
```
sudo apt install npm
```
Nainstalujte Visual Studio Code.
Nainstalujte rozšíření Reactive Native Tools pro Visual Studio Code.
Volitelně můžete nainstalovat rozšíření pro vývoj pomocí Reduxu a JSX.

Vytvoření aplikace React je oficiálně podporovaný způsob vytvoření aplikace React a nevyžaduje žádnou další konfiguraci, pokud používáte npm 5.2 a vyšší. Další pokyny k používání aplikace React najdete v úvodní dokumentaci.

Další komponenty potřebné pro web založený na Reactu se instalují pomocí NPM do konkrétní aplikace. Zadejte například následující příkazy pro instalaci knihoven Redux a JSX:

npm install react-redux
npm install react-jsx

Instalace rozšíření ladicího programu

Nainstalujte rozšíření React Developer Tools pro váš prohlížeč, abyste mohli zkontrolovat komponenty Reactu a zaznamenávat informace o výkonu.

Pokud chcete aplikaci spustit v režimu vývoje, použijte npm start integrovaný příkaz. Adresy URL místního a síťového prostředí budou uvedené ve výstupu příkazu. Další informace o tom, jak místo HTTP používat HTTPS, najdete v tématu Vytvoření aplikace React: Použití HTTPS ve vývoji.

Aktualizace nastavení brány firewall

Oficiální buildy Ubuntu mají nainstalované iptables a ve výchozím nastavení povolí veškerý příchozí provoz. Pokud ale používáte virtuální počítač s více omezující bránou firewall, přidejte příchozí pravidlo, které povolí provoz na server NodeJS. Následující příklad používá iptables k povolení provozu na port 3000.

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

Důležité

Vyučující musí pro přístup k webu studenta použít šablonu virtuálního počítače nebo jiný virtuální počítač testovacího prostředí.

Další kroky

Image šablony je teď možné publikovat do testovacího prostředí. Další informace najdete v tématu Publikování virtuálního počítače šablony.

Při nastavování testovacího prostředí si projděte následující články:

Sdílet prostřednictvím