Integrarea React în aplicația ta Astro

În acest tutorial vei învăța cum să adaugi React la aplicația ta Astro. Acest lucru îți va permite să creezi componente React moderne și să le integrezi în aplicația ta. Vom parcurge pașii necesari pentru a-ți pregăti aplicația Astro pentru React și pentru a crea o componentă simplă.

Concluzii cheie

• Trebuie să instalezi pachetul React și modulele corespunzătoare.
• Structura componentelor tale în Astro este ușor diferită față de HTML-ul pur.
• Pentru a te asigura că componentele tale React sunt redândite în browser, trebuie să folosești atributul client:only.

Ghid pas cu pas

Pentru a adăuga React la aplicația ta Astro, urmează acești pași:

Mai întâi, trebuie să te asiguri că serverul tău de dezvoltare nu mai rulează. Poți face acest lucru oprind comanda npm run dev. Acest lucru este important pentru a evita conflictele în timpul instalării noilor dependințe.

Acum ești pregătit să integrezi oficial React-ul. Pentru aceasta, folosești comanda npx astro add react. Cu această comandă adaugi pachetele necesare pentru suportul React în aplicația ta Astro.

În continuare, vei fi întrebat dacă dorești să instalezi noile dependințe cu npm. Asigură-te că confirmi această instalare, deoarece fără aceste dependințe instalarea nu va funcționa corect.

În timpul procesului de instalare vor fi făcute și modificări la astro.config.mjs. Ar trebui să accepți și aceste modificări pentru ca totul să funcționeze fără probleme.

Odată ce instalarea a fost finalizată, aplicația ta ar trebui acum să beneficieze de suportul pentru React. Să vedem ce noi dependințe au fost adăugate. În fișierul tău package.json vei găsi acum react, react-dom și @astrojs/react ca module.

Pentru a te asigura că totul este corect configurat, ai nevoie de o componentă React pe care să o poți testa. Creează în directorul src un nou director numit components, care va conține mai târziu componentele tale React.

În acest director creează un fișier numit index.jsx. Acesta va fi componenta ta React gata de utilizare, în care poți plasa codul tău.

Acum trebuie să te asiguri că componenta este importată în fișierul index.astro. Acest lucru se întâmplă între cei trei de cricheti (---) din partea de sus a fișierului, unde poți adăuga instrucțiuni de import.

Instrucțiunea ta de import ar putea arăta cam așa: import App from '../components/index.jsx';. Acest lucru va asigura încărcarea corectă a componentei tale.

Mai întâi trebuie să te asiguri că ai ceva exportat, pentru a evita ca fișierul să rămână gol. Adaugă o funcție simplă care să randeze ceva în DOM.

Ține minte să setezi atributul client:only pentru componenta ta. Acest lucru va asigura redarea componentei în browser și nu pe server.

Acum vom intra în fișierul index.jsx și vom crea o simplă componentă React. Poți adăuga, de exemplu, un div simplu cu textul „App” în HTML.

Dacă acum pornesti aplicația, ar trebui să vezi că noua componentă a fost încărcată cu succes și funcționează corect.

Când te uiți la DOM, vei observa că Astro folosește un loc special numit „Insula Astro” în care componentele tale React sunt renderizate.

Astro permite utilizarea simultană a mai multor librării front-end. Acest lucru înseamnă că poți combina React, Vue sau alte librării într-o singură aplicație fără a întâmpina complicații.

Funcționarea componentei tale este deja un pas bun, iar acum poți lucra pentru extinderea aplicației tale. În tutorialele viitoare vom dezvolta această componentă într-o aplicație de chat.

Sumar

În acest tutorial ai învățat cum să adaugi React la aplicația ta Astro și să creezi o componentă simplă. Acest lucru deschide ușa către o varietate de posibilități de extindere a aplicației tale.