"React" integravimas į "Astro" programėlę

Šioje pamokoje sužinosite, kaip į "Astro" programą įtraukti "React". Taip galėsite kurti modernius "React" komponentus ir integruoti juos į savo programą. Atliksime būtinus veiksmus, kad paruoštumėte savo "Astro" programėlę "React" ir sukurtumėte paprastą komponentą.

Pagrindinės žinios

• Reikia įdiegti "React" paketą ir atitinkamus įskiepius
• Jūsų komponentų struktūra "Astro" šiek tiek skiriasi nuo grynojo HTML.
• Norėdami užtikrinti, kad jūsų "React" komponentai būtų atvaizduojami naršyklėje, turite naudoti atributą client:only.

Žingsnis po žingsnio vadovas

Norėdami pridėti "React" į savo "Astro" programą, atlikite toliau nurodytus veiksmus:

Pirmiausia turite įsitikinti, kad jūsų kūrimo serveris nebeveikia. Tai galite padaryti atšaukdami komandą npm run dev. Tai svarbu siekiant užtikrinti, kad diegiant naujas priklausomybes nekiltų jokių konfliktų.

Dabar esate pasirengę oficialiai integruoti "React". Tam naudokite komandą npx astro add react. Naudodami šią komandą pridėsite reikiamus paketus, kurie reikalingi "React" palaikymui jūsų "Astro" programoje.

Tada jūsų bus paklausta, ar norite įdiegti naujas priklausomybes su npm. Būtinai tai patvirtinkite, nes be šių priklausomybių diegimas neveiks tinkamai.

Diegimo proceso metu taip pat atliekami pakeitimai astro.config.mjs. Šiuos pakeitimus taip pat turėtumėte patvirtinti, kad viskas veiktų sklandžiai.

Baigus diegimo procesą, jūsų programa dabar turėtų palaikyti "React". Patikrinkime, kokios naujos priklausomybės buvo pridėtos. Dabar savo package.json rasite react, react-dom ir @astrojs/react kaip įskiepius.

Kad įsitikintumėte, jog viskas sukonfigūruota teisingai, jums reikia "React" komponento, kurį galėtumėte išbandyti. Src aplanke sukurkite naują aplanką pavadinimu components, kuriame vėliau bus jūsų "React" komponentai.

Šiame aplanke sukurkite failą index.jsx. Tai bus jūsų paruoštas veikti "React" komponentas, į kurį galėsite patalpinti savo kodą.

Dabar reikia įsitikinti, kad index.astro faile esantis komponentas yra importuotas. Tai atliekama tarp trijų brūkšnelių (---) failo viršuje, kur galite įterpti importavimo teiginius.

Jūsų importo teiginys galėtų atrodyti taip: import App from '../components/index.jsx';. Tai užtikrins, kad jūsų komponentas būtų įkeltas teisingai.

Pirmiausia turite įsitikinti, kad ką nors eksportuojate, kad failas neliktų tuščias. Pridėkite paprastą funkciją, kuri ką nors atvaizduoja į DOM.

Nepamirškite savo komponentui nustatyti atributą client:only. Taip užtikrinama, kad komponentas būtų atvaizduojamas naršyklėje, o ne serveryje.

Dabar eikime į index.jsx failą ir sukurkime paprastą "React" komponentą. Pavyzdžiui, į HTML galite įterpti paprastą divą su tekstu "App".

Jei dabar paleisite programą, turėtumėte pamatyti, kad naujasis komponentas buvo sėkmingai įkeltas ir veikia tinkamai.

Jei pažvelgsite į DOM, pastebėsite, kad "Astro" naudoja specialią vietą, pavadintą "Astro Island", kurioje atvaizduojami jūsų "React" komponentai.

Astro suteikia galimybę vienu metu naudoti kelias frontendo bibliotekas. Tai reiškia, kad vienoje programoje be jokių komplikacijų galite derinti "React", "Vue" ar kitas bibliotekas.

Komponento veikimo užtikrinimas jau yra geras žingsnis ir dabar galite toliau kurti savo programą. Būsimose pamokose sukursime komponentą į pokalbių programą.

Apibendrinimas

Šioje pamokoje sužinojote, kaip pridėti "React" prie "Astro" programos ir sukurti paprastą komponentą. Tai atveria duris įvairioms galimybėms išplėsti jūsų programą.