Integration av React i din Astro-app

I denna handledning kommer du att lära dig hur du lägger till React till din Astro-app. Detta kommer att låta dig skapa moderna React-komponenter och integrera dem i din applikation. Vi kommer att gå igenom de nödvändiga stegen för att förbereda din Astro-app för React och skapa en enkel komponent.

Viktigaste insikter

• Du måste installera React-paketet och de tillhörande tilläggen.
• Strukturen för dina komponenter i Astro skiljer sig något från ren HTML.
• För att säkerställa att dina React-komponenter renderas i webbläsaren måste du använda attributet client:only.

Steg-för-steg-guide

För att lägga till React i din Astro-app följer du dessa steg:

Först måste du se till att din utvecklingsserver inte körs längre. Du kan göra detta genom att avbryta kommandot npm run dev. Detta är viktigt för att säkerställa att du inte har några konflikter vid installationen av nya beroenden.

Nu är du redo att officiellt integrera React. Använd kommandot npx astro add react för detta. Med detta kommando lägger du till de nödvändiga paketen som behövs för att stödja React i din Astro-app.

Sedan kommer du att bli ombedd att installera de nya beroendena med npm. Se till att bekräfta detta, eftersom installationen inte kommer att fungera korrekt utan dessa beroenden.

Under installationsprocessen görs även ändringar i astro.config.mjs. Du bör också acceptera dessa ändringar för att allt ska fungera smidigt.

När installationen är klar ska din app nu ha stöd för React. Låt oss kolla vilka nya beroenden som har lagts till. I din package.json hittar du nu react, react-dom samt @astrojs/react som tillägg.

För att se till att allt är korrekt konfigurerat behöver du en React-komponent som du kan testa. Skapa en ny mapp med namnet components i src-mappen som senare kommer att innehålla dina React-komponenter.

I denna mapp skapar du en fil med namnet index.jsx. Detta kommer att vara din färdiga React-komponent där du kan placera din kod.

Därefter måste du se till att komponenten importeras i index.astro-filen. Detta görs mellan de tre bindestrecken (---) högst upp i filen, där du kan lägga till importanvisningar.

Din importanvisning kan se ut ungefär så här: import App from '../components/index.jsx';. Detta säkerställer att din komponent laddas korrekt.

Först måste du se till att exportera något så att filen inte förblir tom. Lägg till en enkel funktion som renderar något i DOM.

Kom ihåg att sätta attributet client:only för din komponent. Det ser till att komponenten renderas i webbläsaren och inte på servern.

Nu går vi till index.jsx-filen och skapar en enkel React-komponent. Du kan t.ex. lägga till en enkel div med texten "App" i HTML-koden.

När du startar appen nu bör du se att den nya komponenten har laddats korrekt och fungerar som den ska.

När du tittar på DOM:en kommer du att märka att Astro använder en speciell platsmarkör kallad "Astro Island", där dina React-komponenter renderas.

Astro gör det möjligt att använda flera frontend-bibliotek samtidigt. Det innebär att du kan kombinera React, Vue eller andra bibliotek i en applikation utan komplikationer.

Att din komponent fungerar redan är ett bra steg, och du kan nu arbeta med att vidareutveckla din applikation. I framtida handledningar kommer vi att utveckla komponenten till en chattapplikation.

Sammanfattning

I den här handledningen har du lärt dig hur du lägger till React i din Astro-app och skapar en enkel komponent. Detta öppnar dörren till en mängd olika möjligheter att utöka din applikation.