Selles õpetuses saate teada, kuidas lisada oma Astro rakendusse Reacti. See võimaldab teil luua kaasaegseid Reacti komponente ja neid oma rakendusse integreerida. Läheme läbi vajalikud sammud, et valmistada oma Astro rakendus ette Reacti jaoks ning luua lihtne komponent.
Olulisemad tähelepanekud
- Peate installima React-paketi ja vastavad pistikprogrammid.
- Teie Astro komponentide struktuur erineb veidi tavalisest HTML-ist.
- Tagamaks, et teie Reacti komponendid renditakse brauseris, peate kasutama atribuuti client:only.
Juhised samm-sammult
Reacti lisamiseks oma Astro rakendusse toimige järgmiselt:
Kõigepealt veenduge, et teie arendusserver ei tööta enam. Seda saate teha, katkestades käsu npm run dev. See on oluline sammuks, et tagada uute sõltuvuste installimise ajal konfliktide vältimine.
Nüüd olete valmis ametlikult Reacti integreerima. Selleks kasutage käsku npx astro add react. Selle käsuga lisate vajalikud paketid, mis on vajalikud Reacti toe jaoks teie Astro rakenduses.
Järgmisena küsitakse teilt, kas soovite uued sõltuvused installida kasutades npm. Veenduge, et kinnitate selle, kuna ilma nende sõltuvusteta installatsioon ei õnnestu korralikult.
Installimise käigus tehakse muudatusi ka file astro.config.mjs. Peaksite need muudatused samuti vastu võtma, et kõik toimiks sujuvalt.
Pärast installimist peaks teie rakendus nüüd toetama Reacti. Kontrollime, millised uued sõltuvused on lisatud. Teie package.json failist leiate nüüd Reacti, react-domi ja @astrojs/reacti pistikprogrammid.
Tagamaks, et kõik on õigesti konfigureeritud, vajate Reacti komponenti, mida saate testida. Loo src kausta uus kaust nimega components, kuhu hiljem lisatakse teie Reacti komponendid.
Selles kaustas looge fail nimega index.jsx. See saab olema teie valmisolev Reacti komponent, kuhu saate oma koodi lisada.
Nüüd peate tagama, et komponent imporditakse index.astro failis. See juhtub faili ülaosas kolme kriipsu (---) vahel, kus saate lisada importimiskäsud.
Teie importimiskäsk võib välja näha umbes selline: import App from '../components/index.jsx';. See tagab teie komponendi õige laadimise.
Kõigepealt peate tagama, et midagi eksporditakse, et fail ei jääks tühjaks. Lisage lihtne funktsioon, mis renderdab midagi DOM-i.
Olge teadlik klient:ainult atribuudi seadmisest oma komponendile. See tagab, et komponent renditakse brauseris ega serveris.
Mine nüüd index.jsx faili ja loo lihtne Reacti komponent. Näiteks võite HTML-is lisada lihtsa div, milles on tekst "App".
Kui nüüd rakenduse käivitate, peaksite nägema, et uus komponent on edukalt laaditud ja töötab korralikult.
Kui vaatad DOM-i, märkad, et Astro kasutab spetsiaalset kohatäidist nimega "Astro saar", kus renderdatakse sinu Reacti komponendid.
Astro võimaldab korraga kasutada mitut erinevat kasutajaliidese raamatukogu. See tähendab, et saad kombineerida Reacti, Vue'i või teisi raamatukogusid ühes rakenduses ilma komplikatsioonideta.
Sinu komponendi toimimine on juba hea samm ning saad nüüd jätkata oma rakenduse laiendamist. Tulevastes õpetustes arendame selle komponendi vestlusäri rakenduseks.
Kokkuvõte
Selles õpetuses õppisid, kuidas lisada React oma Astro rakendusse ja luua lihtne komponent. See avab ukse mitmesugustele võimalustele oma rakenduse laiendamiseks.
Sagedased küsimused
Kuidas paigaldada React oma Astro rakendusse?Sa võid lisada Reacti oma Astro rakendusse käsu abil npx astro add react.
Miks on oluline kasutada client:only?Atribuut client:only tagab, et sinu komponent renderdataks brauseris, mitte serveris.
Kas ma võiksin kasutada mitut kasutajaliidese raamatukogu ühe Astro rakendusega?Jah, Astro võimaldab kasutada korraga mitmeid kasutajaliidese raamatukogusid nagu React, Vue ja teised.
