Integracija Reacta v tvojo Astro aplikacijo

V tem vodiču se boš naučil, kako dodaš React v svojo Astro aplikacijo. To ti omogoča ustvarjanje sodobnih React komponent in njihovo integracijo v tvojo aplikacijo. Prehodili bomo potrebne korake, da pripraviš svojo Astro aplikacijo za React in ustvariš preprosto komponento.

Najpomembnejše ugotovitve

• Moraš namestiti React paket in ustrezne vtičnike.
• Struktura tvojih komponent v Astro se malo razlikuje od čistega HTML-ja.
• Za zagotovitev, da se tvoje React komponente pravilno prikažejo v brskalniku, moraš uporabiti atribut client:only.

Korak-po-korak navodila

Za dodajanje Reacta v tvojo Astro aplikacijo sledi tem korakom:

Najprej moraš poskrbeti, da tvoj razvojni strežnik ni več aktiven. To lahko storiš tako, da prekineš ukaz npm run dev. To je pomembno, da zagotoviš, da nimaš konfliktov med namestitvijo novih odvisnosti.

Zdaj si pripravljen, da uradno integriraš React. To narediš z ukazom npx astro add react. S tem ukazom dodaš potrebne pakete, ki so potrebni za podporo Reacta v tvoji Astro aplikaciji.

Po prejemu poziva, če želiš novo odvisnost namestiti z npm, poskrbi, da to potrdiš, saj namestitev brez teh odvisnosti ne bo pravilno delovala.

Med namestitvenim procesom se spremembe naredijo tudi v astro.config.mjs. Te spremembe moraš tudi sprejeti, da vse deluje gladko.

Ko je namestitev končana, bi morala tvoja aplikacija zdaj imeti podporo za React. Preverimo, katere nove odvisnosti so bile dodane. V tvojem package.json boš našel react, react-dom in @astrojs/react kot vtičnike.

Za zagotovitev, da je vse pravilno nastavljeno, potrebuješ React komponento, ki jo lahko preizkusiš. V src mapi ustvari nov mapo imenovano components, ki bo vsebovala tvoje React komponente v prihodnosti.

V tej mapi ustvari datoteko imenovano index.jsx. Ta bo tvoja pripravljena React komponenta, kamor lahko vstaviš svojo kodo.

Nato moraš zagotoviti, da je komponenta uvožena v datoteko index.astro. To storiš med tremi vezaji (---) na vrhu datoteke, kjer lahko vstaviš uvozne ukaze.

Tvoj uvozni ukaz bi lahko izgledal nekako tako: import App from '../components/index.jsx';. To zagotavlja, da je tvoja komponenta pravilno naložena.

Najprej moraš zagotoviti nekaj izvoza, da datoteka ni prazna. Dodaj preprosto funkcijo, ki nekaj prikaže v DOM.

Ne pozabi nastaviti atributa client:only za svojo komponento. S tem se zagotovi, da se komponenta prikaže v brskalniku, ne pa na strežniku.

Zdaj bomo šli v datoteko index.jsx in ustvarili enostavno React komponento. Na primer, v HTML lahko vstaviš preprost div z besedilom "App".

Ko zaženeš aplikacijo, bi moral videti, da se nova komponenta uspešno naloži in pravilno deluje.

Ko pogledate DOM, boste opazili, da Astro uporablja poseben rezerviran prostor imenovan "Astro Island", kjer se vaše React komponente izvajajo.

Astro omogoča hkratno uporabo več prednjih knjižnic. To pomeni, da lahko kombinirate React, Vue ali druge knjižnice v eni aplikaciji, brez kakršnih koli zapletov.

Delovanje vaše komponente je že dober korak, sedaj lahko delate na razširitvi vaše aplikacije. V prihodnjih vadnicah bomo komponento razvili v aplikacijo za klepet (Chat).

Povzetek

V tem vodiču ste se naučili, kako dodati React v vašo aplikacijo Astro in ustvariti enostavno komponento. To odpira vrata številnim možnostim za razširitev vaše aplikacije.