# React, Vue et MDX Des composants quand vous le voulez, du JavaScript seulement là où il le faut.

> vagejs, générateur de sites statiques React et MDX, rend les composants React et Vue en HTML simple et n'envoie du JavaScript que pour les îlots interactifs.

vagejs est un générateur de sites statiques qui vous permet de construire des pages avec des composants React et Vue et d'écrire votre contenu en MDX, puis transforme le tout en HTML simple au moment de construire votre site. Les visiteurs ne reçoivent aucun JavaScript, sauf si vous marquez un composant React comme interactif, et alors uniquement sur les pages qui l'utilisent.

`npm create vagejs@latest my-site`

[Lire la documentation des composants](https://vagejs.com/docs/components/)[Ajouter un composant interactif](https://vagejs.com/guides/interactive-react-component-static-site/)

## Ce que vous pouvez construire avec des composants

Les composants sont une façon agréable de construire un site : écrivez une carte de tarifs une fois, utilisez-la sur dix pages. Le coût habituel, c'est du JavaScript que chaque visiteur télécharge, même pour des parties de la page qui ne changent jamais. Nous gardons les composants et supprimons ce coût.

-   ### Des layouts en composants React ou Vue
    
    Écrivez `src/layouts/default.tsx` ou `default.vue`. Un layout React reçoit les mêmes données qu'un layout TypeScript : la page, le site, la liste des pages et vos menus. Les visiteurs reçoivent du HTML simple, sans JavaScript.
    
-   ### Des pages MDX
    
    Le MDX, c'est du Markdown qui peut utiliser des composants React. Écrivez `src/pages/pricing.mdx` et importez n'importe quel composant depuis `src/components/`. La page devient elle aussi du HTML simple, sans JavaScript.
    
-   ### Des îlots React interactifs
    
    Ajoutez `client:load`, `client:visible` ou `client:idle` à un composant React et il s'exécute dans le navigateur. Le JavaScript ne va qu'aux pages qui en utilisent un.
    

## Des îlots seulement là où vous le demandez

Un îlot est une partie interactive sur une page par ailleurs statique. Il est d'abord rendu en HTML : les visiteurs voient le composant tout de suite, et la page fonctionne pendant que son JavaScript se charge.

```
import Calculator from "../components/Calculator.tsx";

<Calculator client:load rate={4.5} />
```

| Directive | Démarre |
| --- | --- |
| `client:load` | dès que la page se charge |
| `client:visible` | quand il apparaît à l'écran |
| `client:idle` | quand le navigateur n'a rien d'autre à faire |

Avec `client:visible`, les visiteurs qui ne font jamais défiler la page jusque-là ne téléchargent jamais le composant.

## Le MDX est vérifié comme le Markdown

Les pages MDX et les layouts en composants sont traités comme les pages Markdown : titres, descriptions, entrées du sitemap, données structurées, et `vage check` pour les liens cassés, les liens cachés et les liens vers des sites que vous n'avez pas approuvés.

```
---
title: Pricing
description: Plans and prices.
---
import PlanCard from "../components/PlanCard.tsx";

# Pricing

<PlanCard name="Team" price="$20 a month" />
```

Une différence : une page MDX est du code, comme un layout. Elle s'exécute pendant la construction du site, donc vagejs ne peut pas la nettoyer comme il nettoie le HTML des pages Markdown. Réservez le MDX à du contenu auquel vous feriez confiance dans un layout.

## À qui s'adressent React, Vue et MDX dans vagejs

-   ### Aux équipes qui pensent déjà en React
    
    Réutilisez les composants et les habitudes que vous avez, sans transformer un site de contenu en application.
    
-   ### Aux sites qui ont besoin d'une ou deux parties interactives
    
    Un calculateur de prix, un filtre ou un petit quiz, sur un site par ailleurs statique.
    
-   ### À toute personne qui quitte un framework à composants
    
    Gardez vos layouts sous forme de composants, et profitez au passage des vérifications et des fichiers SEO intégrés.
    

## Ce que ça coûte

Les sites qui n'utilisent pas de composants n'installent rien de plus. Ajoutez React, Vue ou MDX quand vous en avez besoin ; s'il en manque un, le build vous indique la commande exacte pour l'installer.

Un îlot coûte bien du JavaScript. `vage audit` le compte sur chaque page, y compris React lui-même (environ 215 KB), ce qui dépasse le budget par défaut de 100 KB. En ajouter un est donc une décision que vous prenez, pas un accident. Pour beaucoup de tâches, le HTML simple fait la même chose : un élément `<details>` s'ouvre et se ferme, et un formulaire peut s'envoyer sans aucun script.

terminal

```
npm install react react-dom                  # React layouts
npm install --save-dev @mdx-js/mdx           # plus React, for MDX pages
npm install vue && npm install --save-dev @vitejs/plugin-vue   # Vue layouts
```

## Les limites, pour l'instant

Voici ce qui ne fonctionne pas encore, pour que vous puissiez vous organiser en conséquence.

-   Les composants interactifs sont uniquement en React. Les composants Vue fonctionnent dans les layouts, sous forme de HTML.
-   Les composants interactifs reçoivent des données simples (texte, nombres, listes) et ne peuvent pas contenir d'autres composants interactifs.
-   Le CSS importé dans les composants n'est pas collecté. Placez vos styles dans `public/` et liez-les depuis le layout.

Si vous avez besoin d'îlots en Vue ou en Svelte, ou d'un site surtout interactif, voyez [comment vagejs se compare](https://vagejs.com/compare/) aux autres outils.

## Pour aller plus loin avec React, Vue et MDX dans vagejs

La prise en charge de React est arrivée avec la version 0.10 pour les layouts et les pages MDX, et avec la 0.11 pour les composants interactifs.

-   Étape par étape : [ajouter un composant React interactif à un site statique](https://vagejs.com/guides/interactive-react-component-static-site/)
-   Toutes les options et règles : [React, Vue et MDX dans la documentation](https://vagejs.com/docs/components/)
-   Les autres fonctionnalités : [toutes les fonctionnalités de vagejs](https://vagejs.com/fr/features/)

## Questions sur React, Vue et MDX

### Dois-je installer React pour utiliser vagejs ?

Non. Un site sans composants n'a besoin ni de React, ni de Vue, ni de MDX. Installez chacun d'eux quand vous commencez à vous en servir. Si une page ou un layout a besoin d'un paquet qui manque, le build s'arrête et affiche la commande d'installation exacte.

### Pourquoi useState ou onClick ne fait-il rien dans mon composant ?

Seuls les composants marqués `client:load`, `client:visible` ou `client:idle` s'exécutent dans le navigateur. Tout le reste est transformé en HTML une seule fois, pendant la construction du site, donc l'état, les effets et les gestionnaires de clic n'y font rien. Marquez le composant comme interactif s'il en a besoin.

### Comment styliser mes composants ?

Placez votre CSS dans `public/` et liez-le depuis votre layout. Le CSS à l'intérieur des composants, comme un bloc `<style>` Vue ou `import "./card.css"`, n'est pas ajouté au site.

### Puis-je modifier les pages MDX dans l'éditeur du navigateur ?

Pas encore. L'éditeur qu'ouvre `npm run dev` ne liste que les pages `.md`, donc modifiez les pages `.mdx` dans votre éditeur de code.