Integraatio Reactiin Astro-sovelluksessasi

Tässä oppaassa opit, miten lisäät Reactin Astro-sovellukseesi. Tämä mahdollistaa modernien React-komponenttien luomisen ja integroimisen sovellukseesi. Käymme läpi tarvittavat vaiheet Astro-sovelluksesi valmisteluun Reactia varten ja luomme yksinkertaisen komponentin.

Tärkeimmät oivallukset

• Sinun on asennettava React-paketti ja niihin liittyvät liitännäiset.
• Komponenttiesi rakenne Astrossa eroaa hieman pelkästä HTML:stä.
• Jotta React-komponenttisi renderöityvät selaimessa, sinun on käytettävä client:only-attribuuttia.

Vaiheittainen ohje

Lisätäksesi Reactin Astro-sovellukseesi, toimi seuraavasti:

Ensinnäkin sinun on varmistettava, ettei kehityspalvelimesi ole enää käynnissä. Voit tehdä tämän keskeyttämällä komennon npm run dev. Tämä on tärkeää, jotta varmistat, ettei sinulla ole konflikteja uusien riippuvuuksien asennuksen aikana.

Olet nyt valmis virallisesti integroimaan Reactin. Käytä tähän komentoa npx astro add react. Tällä komennolla lisäät tarvittavat paketit, jotka ovat tarpeen React-tuen saamiseksi Astro-sovelluksessasi.

Tämän jälkeen sinulta kysytään, haluatko asentaa uudet riippuvuudet npm:llä. Varmista, että hyväksyt tämän, koska asennus ei toimi kunnolla ilman näitä riippuvuuksia.

Asennusprosessin aikana astro.config.mjs-tiedostoon tehdään myös muutoksia. Sinun tulisi hyväksyä nämä muutokset, jotta kaikki toimii moitteettomasti.

Kun asennus on valmis, sovelluksellasi pitäisi nyt olla React-tuki. Tarkistetaan, mitä uusia riippuvuuksia on lisätty. package.json-tiedostosta löydät nyt react, react-dom sekä @astrojs/react -liitännäiset.

Varmistaaksesi, että kaikki on oikein määritetty, tarvitset React-komponentin, jota voit testata. Luo src-kansioon uusi kansio nimeltä components, joka sisältää myöhemmin React-komponenttisi.

Tämän kansioon luot tiedoston nimeltä index.jsx. Tästä tulee valmis React-komponenttisi, johon voit sijoittaa koodisi.

Nyt varmista, että komponentti tuodaan index.astro-tiedostoon. Tämä tapahtuu tiedoston yläosan kolmen miinusmerkin (---) välissä, johon voit lisätä tuontilauseita.

Esimerkki tuontilauseestasi voisi näyttää tältä: import App from '../components/index.jsx';. Tämä varmistaa, että komponenttisi ladataan oikein.

Ensinnäkin varmista, että jotain viedään, jotta tiedosto ei jää tyhjäksi. Lisää yksinkertainen toiminto, joka renderöi jotain DOMiin.

Muista asettaa client:only-attribuutti komponentillesi. Tämä varmistaa, että komponentti renderöidään selaimessa eikä palvelimella.

Nyt siirry index.jsx-tiedostoon ja luo yksinkertainen React-komponentti. Voit esimerkiksi lisätä yksinkertaisen divin, jossa lukee ”App”, HTML:ään.

Kun käynnistät sovelluksen nyt, sinun pitäisi nähdä, että uusi komponentti on ladattu onnistuneesti ja toimii oikein.

Kun tarkastelet DOM:ia, huomaat, että Astro käyttää erityistä paikkamerkkiä nimeltään "Astro Island", johon React-komponenttisi renderöidään.

Astro mahdollistaa useiden frontend-kirjastojen samanaikaisen käytön. Tämä tarkoittaa, että voit yhdistää Reactin, Vuen tai muita kirjastoja yhteen sovellukseen ilman komplikaatioita.

Komponenttisi toimivat jo hyvin, ja voit nyt työskennellä niiden laajentamisen parissa. Tulevissa opetusohjelmissa kehitämme komponenttia edelleen chat-sovellukseksi.

Yhteenveto

Tässä oppitunnissa opit lisäämään Reactin Astro-sovellukseesi ja luomaan yksinkertaisen komponentin. Tämä avaa oven moniin mahdollisuuksiin sovelluksesi laajentamiseen.