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.

A React integrálása az Astro alkalmazásba

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 React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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 React integrálása az Astro alkalmazásba

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.

A React integrálása az Astro alkalmazásba

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