Intégration de React dans votre application Astro

Dans ce tutoriel, tu vas apprendre comment ajouter React à ton application Astro. Cela te permettra de créer des composants React modernes et de les intégrer à ton application. Nous passerons en revue les étapes nécessaires pour préparer ton application Astro pour React et créer un composant simple.

Principales conclusions

• Tu dois installer le package React et les plugins correspondants.
• La structure de tes composants dans Astro est légèrement différente du pur HTML.
• Pour garantir que tes composants React sont rendus dans le navigateur, tu dois utiliser l'attribut client:only.

Guide étape par étape

Pour ajouter React à ton application Astro, procède comme suit :

En premier lieu, assure-toi que ton serveur de développement ne fonctionne plus. Tu peux le faire en arrêtant la commande npm run dev. C'est important pour éviter tout conflit lors de l'installation des nouvelles dépendances.

Maintenant, tu es prêt à intégrer officiellement React. Pour ce faire, utilise la commande npx astro add react. Avec cette commande, tu ajoutes les packages nécessaires pour prendre en charge React dans ton application Astro.

Par la suite, on te demandera si tu veux installer les nouvelles dépendances avec npm. Assure-toi de confirmer cette action, car l'installation ne fonctionnera pas correctement sans ces dépendances.

Pendant le processus d'installation, des modifications seront également apportées à astro.config.mjs. Tu devrais également accepter ces modifications pour que tout fonctionne correctement.

Une fois l'installation terminée, ton application devrait désormais bénéficier du support React. Vérifions quelles nouvelles dépendances ont été ajoutées. Dans ton package.json, tu trouveras désormais React, React-Dom ainsi que @astrojs/react en tant que plugins.

Pour t'assurer que tout est correctement configuré, tu auras besoin d'un composant React que tu pourras tester. Crée un nouveau dossier nommé components dans le dossier src qui contiendra tes composants React plus tard.

Dans ce dossier, crée un fichier nommé index.jsx. Ce sera ton composant React prêt à être utilisé, où tu pourras placer ton code.

Ensuite, assure-toi d'importer le composant dans le fichier index.astro. Cela se fait entre les trois tirets (---) dans la partie supérieure du fichier, là où tu peux insérer des instructions d'importation.

Ton instruction d'importation pourrait ressembler à ceci : import App from '../components/index.jsx';. Cela garantit que ton composant est correctement chargé.

Tout d'abord, assure-toi d'exporter quelque chose pour éviter un fichier vide. Ajoute une fonction simple qui rend quelque chose dans le DOM.

N'oublie pas de définir un attribut client:only pour ton composant. Cela garantit que le composant est rendu dans le navigateur, et non sur le serveur.

Passons maintenant au fichier index.jsx et créons un simple composant React. Par exemple, tu peux insérer un simple div avec le texte "App" dans le HTML.

Si tu démarres maintenant l'application, tu devrais voir que le nouveau composant a été chargé avec succès et fonctionne correctement.

Lorsque vous regardez le DOM, vous remarquerez qu'Astro utilise un espace réservé spécial appelé "Astro Island", où vos composants React sont rendus.

Astro permet d'utiliser simultanément plusieurs bibliothèques frontend. Cela signifie que vous pouvez combiner React, Vue ou d'autres bibliothèques dans une seule application sans qu'il y ait de complications.

Le fonctionnement de votre composant est déjà un bon début, et vous pouvez maintenant travailler à étendre davantage votre application. Dans les futurs tutoriels, nous ferons évoluer le composant vers une application de chat.

Résumé

Dans ce tutoriel, vous avez appris comment ajouter React à votre application Astro et créer un composant simple. Cela ouvre la porte à de nombreuses possibilités pour étendre votre application.