L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Intégration de React avec Astro
Les solides performances d’Astro en matière de génération de sites statiques se marient bien avec l’architecture basée sur les composants de React. Découvrez comment intégrer les deux.
Astro est un générateur de sites statiques (SSG) relativement nouveau et hautes performances qui simplifie le processus de création de sites Web en pré-rendu le contenu en HTML statique au moment de la construction. Il prend en charge plusieurs frameworks frontend, tels que React, Vue, Svelte et plus encore, permettant aux développeurs d’utiliser leur pile préférée.
Pour une introduction plus détaillée à Astro, n’oubliez pas de consulter notre article précédemment rédigé : Une introduction à Astro : un framework Web pour les sites Web axés sur le contenu.
Dans l’article d’aujourd’hui, nous nous concentrerons sur l’intégration d’Astro à React, en illustrant comment créer un site statique qui exploite l’architecture basée sur les composants de React tout en bénéficiant du pré-rendu et des temps de chargement rapides d’Astro. Cet article est un article frère de l’article axé sur Vue que nous avons écrit auparavant, Création d’un site statique rapide avec Astro et Vue.
Créer un nouveau projet Astro
Avant de commencer à intégrer React dans Astro, nous devons d’abord créer un nouveau projet Astro. Astro propose un processus de configuration simple qui nous permet de démarrer rapidement avec une configuration minimale.
Dans notre terminal, nous naviguerons vers le répertoire dans lequel nous souhaitons créer un nouveau projet Astro. Nous exécuterons ensuite l’une des commandes suivantes en fonction du gestionnaire de packages de notre choix :
npm create astro@latest
---
yarn create astro
Après avoir exécuté la commande ci-dessus, l’assistant de création de projet d’Astro nous guidera tout au long du processus de configuration. Nous serons invités à choisir un répertoire de projet et à sélectionner un modèle de projet.
Une fois la configuration terminée, nous pouvons accéder au dossier du projet :
cd my-astro-project
Et démarrez le serveur de développement local :
npm run dev
Cela lancera le projet sur http://localhost:4321où nous verrons notre nouveau site Astro en action.
Intégrer React dans Astro
L’approche indépendante du framework d’Astro lui permet de fonctionner de manière transparente avec React. Tout d’abord, dans notre dossier de projet Astro, exécutez la commande suivante pour ajouter la prise en charge de React :
npx astro add react
La commande ci-dessus installera React, configurera les dépendances nécessaires et configurera Astro pour utiliser les composants React. Une fois l’intégration terminée, Astro activera automatiquement les composants basés sur React dans .astro fichiers. Nous pouvons désormais utiliser les composants React parallèlement aux fonctionnalités de modèles HTML d’Astro, ce qui nous permet de tirer pleinement parti de l’écosystème de React tout en conservant la philosophie d’Astro axée sur les performances.
Création de composants React dans Astro
Nous allons maintenant créer un simple composant React appelé Greeting.jsx à l’intérieur de notre projet. Les composants React vivent à l’intérieur du src/components dossier d’un projet Astro.
import React from "react";
export default function Greeting({ name }) {
return (
<div>
<h1>Hello, {name}!</h1>
<p>Welcome to our Astro + React site!</p>
</div>
);
}
Dans le composant ci-dessus, nous rendons simplement un message d’accueil avec un nom passé comme accessoire. L’étape suivante consiste à utiliser ce composant React dans un .astro page.
Utilisation des composants React dans une page Astro
Astro nous permet d’intégrer les composants React dans nos pages de manière transparente. Pour ce faire, nous ouvrirons le src/pages/index.astro fichier et importer le Greeting.jsx composant. Ensuite, utilisez le composant dans la page Astro comme ceci :
---
import Greeting from '../components/Greeting.jsx';
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astro + React</title>
</head>
<body>
<main>
<Greeting name="Hassan" />
</main>
</body>
</html>
Dans l’exemple ci-dessus, le Greeting le composant reçoit un accessoire name="Hassan"qui affichera un message personnalisé sur la page d’accueil. Ce composant est un composant React entièrement fonctionnel, mais en raison du pré-rendu d’Astro, il est généré sous forme de HTML pur pendant le processus de construction, garantissant des temps de chargement plus rapides et des performances optimales.
Ajouter de l’interactivité avec React
Bien qu’Astro encourage un minimum de JavaScript sur le frontend, il existe des cas où l’interactivité est requise. Supposons que nous souhaitions ajouter un simple composant compteur à la page, permettant aux utilisateurs d’incrémenter une valeur. Créons un nouveau Counter.jsx composant:
import React, { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Il s’agit d’un composant React standard utilisant useState pour gérer le décompte. Pour utiliser ce composant de manière interactive dans votre page Astro, nous pouvons l’importer dans index.astro et appliquer le client:charger directif:
<Counter client:load />
Avec le client:load directive, la Counter Le composant sera chargé sur le client, ce qui signifie que les fonctionnalités interactives de React (comme la gestion des états) sont entièrement fonctionnelles. Astro gère l’hydratation de ce composant, donc seul le JavaScript nécessaire est envoyé au client.
Pour plus de détails sur l’utilisation des directives avec les composants React dans Astro, consultez la documentation officielle d’Astro :Astro | Référence des directives du modèle.
Conclure
La combinaison d’Astro entre la génération de sites statiques et la flexibilité du framework en fait la solution idéale pour les développeurs React qui cherchent à optimiser les performances sans sacrifier la puissance des composants React. En pré-rendu la plupart de nos sites et en utilisant JavaScript côté client seulement lorsque cela est nécessairenous pouvons proposer des sites rapides et évolutifs qui exploitent toujours la puissance interactive de React.
Si vous créez des sites axés sur le contenu, des blogs ou des applications complexes, Astro peut être un excellent outil pour équilibrer performances et interactivité.
Source link