Ebben a bemutatóban megtanulhatod, hogyan adhatod hozzá a Reactot az Astro alkalmazásodhoz. Ez lehetővé teszi, hogy modern React komponenseket hozzon létre és integrálja őket az alkalmazásába. Végigmegyünk a szükséges lépéseken, hogy előkészítsük az Astro alkalmazást a Reacthoz, és létrehozzunk egy egyszerű komponenst.
A legfontosabb tanulságok
- Telepítenie kell a React csomagot és a megfelelő bővítményeket
- A komponensek felépítése az Astroban kissé eltér a tiszta HTML-től.
- Ahhoz, hogy a React komponensek megjelenjenek a böngészőben, a client:only attribútumot kell használnia.
Lépésről lépésre útmutató
A React hozzáadásához az Astro alkalmazásához a következőképpen járjon el:
Először is meg kell győződnie arról, hogy a fejlesztői kiszolgálója már nem fut. Ezt az npm run dev parancs leállításával teheti meg. Ez azért fontos, hogy az új függőségek telepítése során ne legyenek konfliktusok.
Most már készen állsz a React hivatalos integrálására. Ehhez használd az npx astro add react parancsot. Ezzel a paranccsal hozzáadod a szükséges csomagokat, amelyek szükségesek a React támogatáshoz az Astro alkalmazásodban.
Ezután a parancs megkérdezi, hogy az új függőségeket az npm segítségével kívánja-e telepíteni. Ezt mindenképpen erősítse meg, mivel a telepítés nem fog megfelelően működni ezen függőségek nélkül.
A telepítési folyamat során az astro.config.mjs fájlban is módosítások történnek. Ezeket a módosításokat is el kell fogadnia, hogy minden zökkenőmentesen működjön.
A telepítés befejezése után az alkalmazásodnak már React támogatással kell rendelkeznie. Nézzük meg, milyen új függőségek kerültek hozzá. A package.json-ban most már megtalálod a react, react-dom és @astrojs/react pluginokat.
Ahhoz, hogy megbizonyosodj arról, hogy minden helyesen van beállítva, szükséged van egy React komponensre, amit tesztelhetsz. Hozzon létre egy új mappát components néven az src mappában, amely később a React komponenseit fogja tartalmazni.
Ebben a mappában hozzon létre egy index.jsx nevű fájlt. Ez lesz a kész React komponensed, amelyben elhelyezheted a kódodat.
Most meg kell győződnöd arról, hogy az index.astro fájlban lévő komponens importálva van. Ezt a fájl tetején lévő három kötőjel (---) között kell megtenned, ahová import utasításokat illeszthetsz be.
Az import utasításod valahogy így nézhet ki: import App from '../components/index.jsx';. Ez biztosítja, hogy a komponensed helyesen töltődik be.
Először is meg kell győződnie arról, hogy exportál valamit, hogy a fájl ne maradjon üres. Adjunk hozzá egy egyszerű függvényt, amely renderel valamit a DOM-ba.
Ne felejtsen el beállítani egy client:only attribútumot a komponensének. Ez biztosítja, hogy a komponens a böngészőben és ne a szerveren renderelődjön.
Most menjünk az index.jsx fájlba, és hozzunk létre egy egyszerű React komponenst. Például beilleszthetünk egy egyszerű div-et az "App" szöveggel a HTML-be.
Ha most elindítjuk az alkalmazást, látnunk kell, hogy az új komponens sikeresen betöltődött és megfelelően működik.
Ha vet egy pillantást a DOM-ra, észreveheti, hogy az Astro egy speciális, "Astro Island" nevű helytartót használ, ahol a React komponensek renderelése történik.
Az Astro lehetővé teszi több frontend könyvtár egyidejű használatát. Ez azt jelenti, hogy a React, a Vue vagy más könyvtárakat komplikációk nélkül kombinálhatod egy alkalmazásban.
A komponensed működésbe hozása már egy jó lépés, és most már dolgozhatsz az alkalmazásod további építésén. A jövőbeli oktatóanyagokban a komponenst egy csevegőalkalmazássá fejlesztjük.
Összefoglaló
Ebben a bemutatóban megtanultad, hogyan adhatod hozzá a Reactot az Astro alkalmazásodhoz, és hogyan hozhatsz létre egy egyszerű komponenst. Ez számos lehetőség előtt nyitja meg az ajtót az alkalmazás bővítéséhez.
Gyakran ismételt kérdések
Hogyan telepíthetem a Reactot az Astro alkalmazásomba?A Reactot az npx astro add react paranccsal adhatja hozzá az Astro alkalmazásához.
Miért fontos a client:only használata?A client:only attribútum biztosítja, hogy a komponens a böngészőben és ne a szerveren kerüljön megjelenítésre.
Használhatok több frontend könyvtárat egy Astro alkalmazásban?Igen, az Astro lehetővé teszi, hogy egyszerre több frontend könyvtárat, például Reactot, Vue-t és másokat használjon.
