Tesztkörnyezet beállítása Windowson a Reacthez

A React egy népszerű JavaScript-kódtár felhasználói felületek (UI) létrehozásához. A React deklaratív módszer a webhely újrafelhasználható összetevőinek létrehozására. Számos más népszerű kódtár is rendelkezésre áll a JavaScript-alapú előtérbeli fejlesztéshez. Ezeket a kódtárakat a labor létrehozásakor fogjuk használni. A Redux egy kódtár, amely kiszámítható állapottárolót biztosít a JavaScript-alkalmazásokhoz, és gyakran használják a Reacttel együtt. A JSX a JavaScript könyvtárszintaxis-bővítménye, amelyet a React gyakran használ a felhasználói felület megjelenésének leírására. A NodeJS egy kényelmes módja annak, hogy webkiszolgálót futtasson a React-alkalmazáshoz.

Ez a cikk bemutatja, hogyan telepítheti a Visual Studio 2019-et a fejlesztői környezethez, valamint a React webfejlesztési osztályhoz szükséges eszközöket és kódtárakat.

A tesztkörnyezet beállításához azure-előfizetésre és tesztkörnyezeti csomagra van szüksége az első lépésekhez. Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.

Miután megkapta az Azure-előfizetést, létrehozhat egy új tesztkörnyezeti csomagot az Azure Lab Servicesben. Az új tesztkörnyezeti terv létrehozásával kapcsolatos további információkért tekintse meg a tesztkörnyezeti terv beállításáról szóló oktatóanyagot. Használhat egy meglévő tesztkörnyezeti tervet is.

Engedélyezze a tesztkörnyezet tervbeállításait az alábbi táblázatban leírtak szerint. További információ az Azure Marketplace-rendszerképek engedélyezéséről: A tesztkörnyezet létrehozói számára elérhető Azure Marketplace-rendszerképek megadása.

A labor létrehozásával kapcsolatos útmutatásért lásd : Oktatóanyag: Tesztkörnyezet beállítása. A tesztkörnyezet létrehozásakor használja az alábbi beállításokat.

Javasoljuk, hogy tesztelje a számítási feladatokat, hogy ellenőrizze, nagyobb méretre van-e szükség. Az egyes méretekről további információt a virtuális gépek méretezését ismertető cikkben talál.

Az ebben a szakaszban ismertetett lépések bemutatják, hogyan hajthatja végre a következő lépéseket a sablon virtuális gépének beállításához:

1. Telepítse a fejlesztői eszközöket.
2. Telepítse a webböngésző hibakereső bővítményeit.
3. Tűzfalbeállítások frissítése.

A Windows Server 2019 (x64)-en futó Visual Studio 2019 Community (legújabb kiadás) rendszerkép már rendelkezik a Visual Studio 2019-hez szükséges Node.js fejlesztési számítási feladatokkal.

1. Telepítse az előnyben részesített webböngészőt. A rendszerképen alapértelmezés szerint telepítve van az Internet Explorer.
2. Lépjen Node.js webhelyre, és válassza a Letöltés gombot. Használhatja a legújabb hosszú távú szolgáltatás (LTS) verziót, az aktuális verziót a legújabb funkciókkal, vagy egy korábbi kiadást. A NodeJS telepítése a Node Csomagkezelő is telepíti, amely a React, a Redux és a JSX telepítéséhez lesz használva.
3. Szükség esetén frissítse a Visual Studio 2019-et a legújabb kiadásra.

A React-alapú webhelyekhez szükséges egyéb összetevőket az NPM használatával telepítik egy adott alkalmazásba. NPM-csomagok hozzáadásához tekintse meg az NPM-csomagok kezelését a Visual Studióban.

Ha például egy projekt Node.js interaktív ablakát használja, írja be a következő parancsokat a React, Redux és JSX kódtárak telepítéséhez:

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

Az első Node.js a Visual Studióban a React alkalmazással való létrehozásához lásd : Oktatóanyag: Node.js és React-alkalmazás létrehozása a Visual Studióban.

Telepítse a React Developer Tools bővítményeket a böngészőhöz, hogy megvizsgálhassa a React-összetevőket, és rögzíthesse a teljesítményadatokat.

• React Developer Tools bővítmény a Microsoft Edge-hez
• React Developer Tools Chrome-bővítmény
• React Developer Tools FireFox bővítmény

Alapértelmezés szerint a Node.js kiszolgálóra irányuló bejövő forgalom le lesz tiltva. Ha egy tanuló webhelyét szeretné elérni futás közben, adjon hozzá egy kötött tűzfalszabályt a forgalom engedélyezéséhez. Tekintse meg az Alkalmazásport projekt tulajdonságot, hogy lássa, melyik portot használja a hibakeresés során. Az alábbi példa a New-NetFirewallRule PowerShell-parancsmaggal teszi lehetővé az 1337-as porthoz való hozzáférést.

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

A sablonkép mostantól közzétehető a laborban. További információ: A sablon virtuális gépének közzététele.

A tesztkörnyezet beállításakor tekintse meg a következő cikkeket:

• Kvóta beállítása
• Ütemezés beállítása
• Felhasználók hozzáadása
• E-mail regisztrációs hivatkozások diákoknak