Šajā pamācībā uzzināsiet, kā pievienot React savai Astro lietotnei. Tas ļaus jums izveidot mūsdienīgus React komponentus un integrēt tos savā lietojumprogrammā. Mēs veiksim nepieciešamos soļus, lai sagatavotu jūsu Astro lietotni React un izveidotu vienkāršu komponentu.
Galvenās atziņas
- Jums ir jāinstalē React pakotne un attiecīgie spraudņi.
- Jūsu komponenšu struktūra Astro ir nedaudz atšķirīga no tīra HTML.
- Lai nodrošinātu, ka jūsu React komponenti tiek atveidoti pārlūkprogrammā, jums ir jāizmanto atribūts client:only.
Soli pa solim
Lai pievienotu React savai Astro lietotnei, rīkojieties šādi:
Vispirms jāpārliecinās, ka izstrādes serveris vairs nedarbojas. To var izdarīt, atceļot npm run dev komandu. Tas ir svarīgi, lai pārliecinātos, ka jauno atkarību instalēšanas laikā neradīsies nekādi konflikti.
Tagad esat gatavs oficiāli integrēt React. Lai to izdarītu, izmantojiet npx astro add react komandu. Ar šo komandu jūs pievienojat nepieciešamās paketes, kas nepieciešamas React atbalstam jūsu Astro lietotnē.
Pēc tam jums tiks jautāts, vai vēlaties instalēt jaunās atkarības ar npm. Pārliecinieties, ka esat to apstiprinājis, jo bez šīm atkarībām instalēšana nedarbosies pareizi.
Instalēšanas procesa laikā tiek veiktas izmaiņas arī astro.config.mjs. Lai viss darbotos bez traucējumiem, jums jāpieņem arī šīs izmaiņas.
Kad instalēšana ir pabeigta, jūsu lietojumprogrammai tagad vajadzētu būt ar React atbalstu. Pārbaudīsim, kādas jaunas atkarības ir pievienotas. Savā package.json tagad atradīsiet react, react-dom un @astrojs/react kā spraudņus.
Lai pārliecinātos, ka viss ir konfigurēts pareizi, jums ir nepieciešama React komponente, kuru varat testēt. Izveidojiet src mapē jaunu mapi ar nosaukumu components, kurā vēlāk tiks ievietotas jūsu React komponentes.
Šajā mapē izveidojiet failu ar nosaukumu index.jsx. Tā būs jūsu gatavā React komponente, kurā varat ievietot savu kodu.
Tagad jums jāpārliecinās, ka index.astro failā esošā komponente ir importēta. Tas tiek izdarīts starp trim defisi (---) faila augšdaļā, kur var ievietot importēšanas paziņojumus.
Jūsu importēšanas paziņojums varētu izskatīties šādi: import App from '../components/index.jsx';. Tas nodrošinās, ka jūsu komponente tiek ielādēta pareizi.
Vispirms jums jāpārliecinās, ka kaut ko eksportējat, lai fails nepaliktu tukšs. Pievienojiet vienkāršu funkciju, kas kaut ko atveido DOM.
Neaizmirstiet iestatīt komponentei atribūtu client:only. Tas nodrošina, ka komponents tiek atveidots pārlūkprogrammā, nevis serverī.
Tagad dodamies uz index.jsx failu un izveidosim vienkāršu React komponentu. Piemēram, HTML formātā var ievietot vienkāršu div ar tekstu "App".
Ja tagad palaižat lietotni, jums vajadzētu redzēt, ka jaunā komponente ir veiksmīgi ielādēta un darbojas pareizi.
Ja aplūkojat DOM, pamanīsiet, ka Astro izmanto īpašu vietas turētāju ar nosaukumu "Astro Island", kurā tiek atveidoti jūsu React komponenti.
Astro ļauj izmantot vairākas frontend bibliotēkas vienlaicīgi. Tas nozīmē, ka vienā lietojumprogrammā bez sarežģījumiem varat apvienot React, Vue vai citas bibliotēkas.
Komponentes darbības uzsākšana jau ir labs solis, un tagad varat strādāt pie tālākas lietojumprogrammas izveides. Turpmākajās pamācībās mēs attīstīsim komponentu par tērzēšanas lietojumprogrammu.
Kopsavilkums
Šajā pamācībā jūs uzzinājāt, kā pievienot React savai Astro lietotnei un izveidot vienkāršu komponentu. Tas paver durvis dažādām iespējām paplašināt jūsu lietojumprogrammu.
Biežāk uzdotie jautājumi
Kā es varu instalēt React savā Astro lietotnē?Jūs varat pievienot React savai Astro lietotnei, izmantojot npx astro add react komandu.
Kāpēc ir svarīgi izmantot atribūtu client:only?Atribūts client:only nodrošina, ka jūsu komponente tiek atveidota pārlūkprogrammā, nevis serverī.
Vai vienā Astro lietotnē es varu izmantot vairākas frontend bibliotēkas?Jā, Astro ļauj vienlaikus izmantot vairākas frontend bibliotēkas, piemēram, React, Vue un citas.
