React-projekt létrehozása

A Visual Studio integrált fejlesztői környezetének (IDE) 5–10 perces bemutatása során létrehoz és futtat egy egyszerű React előtérbeli webalkalmazást.

Előfeltételek

Győződjön meg arról, hogy telepíti a következő szoftvert:

• Visual Studio 2022 vagy újabb verzió. Nyissa meg a Visual Studio letöltési oldalát, és telepítse ingyenesen.
• npm (https://www.npmjs.com/), amelyik a Node.js-gyel van tartalmazva

Az alkalmazás létrehozása

1. A Start ablakban (a megnyitáshoz válassza a Fájl>a Start ablak lehetőséget), válassza Új projekt létrehozásalehetőséget.

   

2. Keresse meg a Reactt a felső keresősávon, majd válassza React App JavaScript vagy TypeScript esetén a beállítások alapján.

   

   A Visual Studio 2022 11-es verziójától kezdve a sablon neve önálló JavaScript React Project--ról React App-re módosult.

3. Adjon nevet a projektnek és a megoldásnak.

4. Válassza a létrehozása lehetőséget, majd várja meg, amíg a Visual Studio létrehozza a projektet.

   Vegye figyelembe, hogy a React-projekt létrehozása eltarthat egy ideig, mert az ekkor futó create-react-app parancs az npm telepítési parancsot is futtatja.

A projekt tulajdonságainak megtekintése

Az alapértelmezett projektbeállítások lehetővé teszik a projekt összeállítását és hibakeresését. Ha azonban módosítania kell a beállításokat, kattintson a jobb gombbal a projektre a Megoldáskezelőben, válassza a Tulajdonságoklehetőséget, majd lépjen a Linting, Build vagy Deploy szakaszra.

Hibakereső konfigurációhoz használjon launch.json.

Jegyzet

launch.json a hibakeresési eszköztár Start gombjához társított indítási beállításokat tárolja. Jelenleg launch.json a .vscode mappában kell lennie.

A projekt felépítése

Válassza Build>Build Solution lehetőséget a projekt létrehozásához.

A projekt indítása

Nyomja le F5 vagy válassza az ablak tetején található Start gombot, és megjelenik egy parancssor, például:

• A VITE v4.4.9 készen áll 780 ms alatt

Jegyzet

Ellenőrizze a konzol kimenetét az üzeneteknél, például egy üzenetnél, amely arra utasítja, hogy frissítse a Node.jsverzióját.

Ezután meg kell jelennie az alap React alkalmazásnak!

Következő lépések

React-alkalmazás létrehozása

ASP.NET Core-integráció esetén:

ASP.NET Core-alkalmazás létrehozása a React használatával