Sdílet prostřednictvím

Nastavení testovacího prostředí pro React ve Windows

  • Článek

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.

Tento článek vám ukáže, jak nainstalovat Visual Studio 2019 pro vývojové prostředí a 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 a plán testovacího prostředí, 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 získáte předplatné Azure, můžete vytvořit nový plán testovacího prostředí ve službě Azure Lab Services. 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í účtu testovacího prostředí Pokyny
Image z Marketplace Povolte Visual Studio 2019 Community (nejnovější verze) na imagi Windows Serveru 2019 (x64).

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 Medium

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:

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

Instalace vývojových nástrojů

Image Visual Studio 2019 Community (nejnovější verze) ve Windows Serveru 2019 (x64) už má nainstalovanou požadovanou úlohu Node.js vývoj pro Visual Studio 2019.

  1. Nainstalujte upřednostňovaný webový prohlížeč. Image má ve výchozím nastavení nainstalovanou aplikaci Internet Explorer.
  2. Přejděte na web Node.js a vyberte tlačítko Stáhnout . Můžete použít nejnovější dlouhodobou verzi služby (LTS), aktuální verzi s nejnovějšími funkcemi nebo předchozí verzi. Instalace NodeJS nainstaluje také Node Správce balíčků, který se použije k instalaci Reactu, Reduxu a JSX.
  3. V případě potřeby aktualizujte Visual Studio 2019 na nejnovější verzi.

Další komponenty potřebné pro web založený na Reactu se instalují pomocí NPM do konkrétní aplikace. Pokud chcete přidat balíčky NPM, podívejte se na správu balíčků NPM v sadě Visual Studio.

Pokud například v projektu používáte Node.js Interaktivní okno , zadejte následující příkazy pro instalaci knihoven React, Redux a JSX:

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

Pokud chcete vytvořit první Node.js s aplikací React v sadě Visual Studio, přečtěte si kurz : Vytvoření Node.js a aplikace React v sadě Visual Studio.

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.

Aktualizace nastavení brány firewall

Ve výchozím nastavení se příchozí provoz na váš Node.js server zablokuje. Pokud chcete získat přístup k webu studenta, když je spuštěný, přidejte pravidlo brány firewall vázané na povolení provozu. Podívejte se na vlastnost projektu Port aplikace a zjistěte, který port se použije během ladění. Následující příklad používá rutinu Prostředí PowerShell New-NetFirewallRule k povolení přístupu k portu 1337.

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

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í.

Náklady

Probereme příklad odhadu nákladů pro tuto třídu. Předpokládejme, že máte třídu 25 studentů. Každý student má 20 hodin naplánovaného času předmětu. Každému studentu je přiděleno dalších 10 hodin kvóty pro domácí úkoly nebo zadání mimo naplánovaný čas předmětu. Velikost virtuálního počítače, kterou jsme zvolili, byla Střední, což je 55 jednotek testovacího prostředí.

  • 25 studentů × (20 naplánovaných hodin + 10 hodin kvóty) × 55 jednotek cvičení × USD0,01 za hodinu = 412,50 USD

Důležité

Odhad nákladů je pouze pro ukázkové účely. Aktuální informace o cenách najdete v tématu Ceny služby Azure Lab Services.

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: