# React, Vue y MDX Componentes cuando los quieras, JavaScript solo donde lo necesites.
> vagejs es un generador de sitios estáticos con React y MDX: convierte componentes de React y Vue en HTML plano y solo envía JavaScript para islas interactivas.
vagejs es un generador de sitios estáticos que te permite crear páginas con componentes de React y Vue y escribir contenido en MDX, y luego lo convierte todo en HTML plano al generar tu sitio. Los visitantes no reciben JavaScript a menos que marques un componente de React como interactivo, y entonces solo en las páginas que lo usan.
`npm create vagejs@latest my-site`
[Lee la documentación de componentes](https://vagejs.com/docs/components/)[Añade un componente interactivo](https://vagejs.com/guides/interactive-react-component-static-site/)
## Lo que puedes crear con componentes
Los componentes son una forma práctica de crear un sitio: escribes una tarjeta de precios una vez y la usas en diez páginas. El coste habitual es un JavaScript que descarga cada visitante, incluso para partes de la página que nunca cambian. Nos quedamos con los componentes y eliminamos ese coste.
- ### Plantillas como componentes de React o Vue
Escribe `src/layouts/default.tsx` o `default.vue`. Una plantilla de React recibe los mismos datos que una de TypeScript: la página, el sitio, la lista de páginas y tus menús. Los visitantes reciben HTML plano y nada de JavaScript.
- ### Páginas MDX
MDX es Markdown que puede usar componentes de React. Escribe `src/pages/pricing.mdx` e importa cualquier componente de `src/components/`. También se convierte en HTML plano, sin JavaScript.
- ### Islas interactivas de React
Añade `client:load`, `client:visible` o `client:idle` a un componente de React y se ejecuta en el navegador. El JavaScript va solo a las páginas que usan una.
## Islas solo donde las pides
Una isla es una parte interactiva dentro de una página por lo demás estática. Primero se convierte en HTML, así que los visitantes ven el componente enseguida y la página funciona mientras se carga su JavaScript.
```
import Calculator from "../components/Calculator.tsx";
```
| Directiva | Empieza |
| --- | --- |
| `client:load` | en cuanto se carga la página |
| `client:visible` | cuando aparece en pantalla al desplazarse |
| `client:idle` | cuando el navegador no tiene nada más que hacer |
Con `client:visible`, los visitantes que nunca llegan hasta ahí nunca descargan el componente.
## MDX se revisa igual que Markdown
Las páginas MDX y las plantillas con componentes reciben el mismo trato que las páginas Markdown: títulos, descripciones, entradas en el sitemap, datos estructurados y `vage check` para enlaces rotos, enlaces ocultos y enlaces a sitios web que no has aprobado.
```
---
title: Pricing
description: Plans and prices.
---
import PlanCard from "../components/PlanCard.tsx";
# Pricing
```
Una diferencia: una página MDX es código, como una plantilla. Se ejecuta al generar el sitio, así que vagejs no puede limpiarla como limpia el HTML en las páginas Markdown. Usa MDX solo para contenido en el que confiarías dentro de una plantilla.
## Para quién son React, Vue y MDX en vagejs
- ### Equipos que ya piensan en React
Reutiliza los componentes y los hábitos que ya tienes, sin convertir un sitio de contenido en una aplicación.
- ### Sitios que necesitan una o dos partes interactivas
Una calculadora de precios, un filtro o un cuestionario corto, en un sitio que por lo demás es estático.
- ### Cualquiera que venga de un framework de componentes
Mantén tus plantillas como componentes y gana, de paso, revisiones y archivos de SEO incluidos.
## Lo que cuesta
Los sitios que no usan componentes no instalan nada más. Añade React, Vue o MDX cuando los necesites; si falta alguno, la compilación te indica el comando exacto para instalarlo.
Una isla sí cuesta JavaScript. `vage audit` lo cuenta en cada página, incluido el propio React (unos 215 KB), lo que supera el límite por defecto de 100 KB. Así que añadir una es una decisión que tomas, no un accidente. Para muchas tareas, el HTML plano hace lo mismo: un elemento `` se abre y se cierra, y un formulario puede enviarse sin ningún 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
```
## Los límites, por ahora
Esto es lo que todavía no funciona, para que puedas planificar en consecuencia.
- Los componentes interactivos son solo de React. Los componentes de Vue funcionan en las plantillas, como HTML.
- Los componentes interactivos reciben datos sencillos (texto, números, listas) y no pueden contener otros componentes interactivos.
- El CSS importado dentro de los componentes no se recoge. Pon tus estilos en `public/` y enlázalos desde la plantilla.
Si necesitas islas en Vue o Svelte, o un sitio que sea interactivo casi por completo, mira [cómo se compara vagejs](https://vagejs.com/compare/) con otras herramientas.
## Más sobre React, Vue y MDX en vagejs
El soporte de React llegó en la versión 0.10 para plantillas y páginas MDX, y en la 0.11 para componentes interactivos.
- Paso a paso: [añade un componente interactivo de React a un sitio estático](https://vagejs.com/guides/interactive-react-component-static-site/)
- Todas las opciones y reglas: [React, Vue y MDX en la documentación](https://vagejs.com/docs/components/)
- Otras funciones: [todas las funciones de vagejs](https://vagejs.com/es/features/)
## Preguntas sobre React, Vue y MDX
### ¿Necesito instalar React para usar vagejs?
No. Un sitio sin componentes no necesita React, Vue ni MDX en absoluto. Instala cada uno cuando empieces a usarlo. Si una página o una plantilla necesita un paquete que falta, la compilación se detiene y muestra el comando exacto para instalarlo.
### ¿Por qué useState u onClick no hacen nada en mi componente?
Solo los componentes marcados con `client:load`, `client:visible` o `client:idle` se ejecutan en el navegador. Todo lo demás se convierte en HTML una sola vez, al generar el sitio, así que ahí el estado, los efectos y los manejadores de clic no hacen nada. Marca el componente como interactivo si los necesita.
### ¿Cómo doy estilo a mis componentes?
Pon tu CSS en `public/` y enlázalo desde tu plantilla. El CSS dentro de los componentes, como un bloque `