A React webfejlesztés első lépései izgalmas kihívást jelenthetnek. Itt vagy, mert megtanulnád, hogyan állítsd be gyorsan és hatékonyan a fejlesztési környezetedet, és elindítsd az első projektet. Ez a kísérlet végigvezet azokon a lépéseken, amelyek szükségesek egy React-alkalmazás létrehozásához a Vite build eszközzel.
Legfontosabb tanulságok
A React fejlesztőkörnyezet létrehozásához szükséged lesz a Visual Studio Code-ra, a Node.js-re és az NPM-re. Megfelelő parancsok és eszközök segítségével rövid idő alatt létrehozhatsz és megjeleníthetsz egy React-alkalmazást a böngészőben.
Lépésről lépésre útmutató
Fejlesztői környezet beállítása
Mielőtt hozzálátnál a tényleges fejlesztéshez, bizonyosodj meg róla, hogy rendelkezel a megfelelő eszközökkel. Először is telepítened kell a Visual Studio Code-ot. Ez a Microsoft által kifejlesztett népszerű és ingyenes fejlesztői környezet, amely kifejezetten a JavaScript-fejlesztéshez készült. A Visual Studio Code letöltéséhez látogasd meg a hivatalos webhelyet, és kövesd az ott található letöltési és telepítési utasításokat.
A Visual Studio Code mellett szükséged lesz a Node.js-re, amely biztosítja a JavaScript futásidejét, valamint az NPM-re, a csomagkezelőre. Le tudod tölteni a Node.js-t a hivatalos webhelyről. Kattints az letöltés oldalra, és válaszd a LTS verziót (Long-Term Support), hogy stabil és bevált verziót kapj.
Node.js és NPM telepítése és ellenőrzése
Miután telepítetted a Node.js-t, ellenőrizned kell, hogy minden rendben megy-e. Nyiss egy terminált. Ezt közvetlenül a Visual Studio Code-ban is megteheted, ha a "Terminal"-ra kattintasz, majd a "New Terminal"-ra. A terminálban írd be a npm -v parancsot. Ha nem jelenik meg a verziószám, akkor esetleg probléma lehet a telepítéssel.
Győződj meg arról, hogy a Node.js megfelelően működik. Ezt megteheted a node -v parancs beírásával a terminálba. Mindkét parancsnak ki kell adnia az NPM és a Node.js telepített verzióját.
Projekt létrehozása a Vite segítségével
A következő lépés az új projekt létrehozása. Ehhez használd a npm create vite parancsot, majd az alkalmazásod nevét. Ebben az esetben egy "To-Do App"-al fogunk dolgozni. Ez elindít egy varázslót, amely különféle lehetőségeket kínál neked. Meg fogod kérdezni, hogy React-et vagy más keretrendszert szeretnél-e használni. Válaszd a "React"-ot.
Ezután megkérdezi, hogy a React-et TypeScript-tel szeretnéd-e használni. Kezdetnek érdemesebb TypeScript nélkül dolgozni, ezért válaszd a "React" alapértelmezett opciót.
Ugrás a projekt könyvtárába
A projekt sikeres létrehozása után navigálj az újonnan létrehozott alkalmazásod könyvtárába. Erre a cd todo-app parancs szolgál. Ott légy, és telepítsd a szükséges csomagokat. Írd be a npm install parancsot a terminálba. Ez az összes szükséges függőséget, beleértve a React-et is telepíti.
A fejlesztői szerver indítása
Most következik a lenyűgöző rész: az fejlesztői szerver indítása! Írd be a npm run dev parancsot. Ez elindítja a Vite fejlesztői szerverét, és kapsz egy URL-t, amelyen keresztül elérheted az alkalmazásod a böngészőben.
Nyisd meg egy modern webböngészőt, és írd be a megadott címet. Egy egyszerű weboldalt kell látnod egy forogó logóval és némi szöveggel, valamint egy gombbal, amely egy számlálót mutat.
Alkalmazás testreszabása
Hogy első benyomást kapj az alkalmazás funkcionalitásáról, végezhetsz néhány apró módosítást az alkalmazásodban. Nyisd meg a src/main.jsx fájlt, és módosítsd az App komponensben található szöveget. Mentsd el a fájlt, és figyeld, hogyan frissülnek azonnal a változások a böngészőben anélkül, hogy az oldalt újra betöltenéd. Ez mutatja meg, milyen hatékonyan működik a Hot Reloading a Vite-ban - kiváló funkció a gyors visszajelzéshez a fejlesztés során.
Fontos megjegyezni, hogy a számláló állása változatlan marad, akkor is, ha a szöveget frissíted. Ez a React erősségei közé tartozik: az állapot megmarad, még akkor is, ha a felhasználói felület frissül.
Részletek
Sikeresen felállítottad a fejlesztői környezetedet, telepítetted a Node.js-t és az NPM-et, létrehoztál egy új React projektet, és elindítottad a böngésződben. Ezzel lettek lerakva a React alkalmazás beállításának alapjai Vite segítségével, most pedig nekiláthatsz az első alkalmazásod elkészítésének.
Gyakran Ismételt Kérdések
Mi az a Vite?A Vite egy modern JavaScript Build-Tool, amely gyors fejlesztői szervert és optimalizált bundlingot kínál.
Milyen Node.js verziót kell telepítenem?Az LTS (Hosszútávú Támogatás) verziójának telepítése ajánlott.
Szükségem van a Vite-ra a React fejlesztéshez?A Vite nem feltétlenül szükséges, de sebességi és hatékonysági előnyöket nyújt a fejlesztés során.
Csak JavaScriptet támogat a React?A React támogatja a TypeScript és más JavaScript dialektusokat is, de a kezdéshez elég a JavaScript.
Használhatom a React-et más szerkesztőkkel is?Igen, a React-et bármely kód szerkesztővel vagy fejlesztői környezettel használhatod, de általában a Visual Studio Code-ot ajánlják.
