vagejs
GitHub Primeros pasos

React, Vue y MDX
Componentes cuando los quieras, JavaScript solo donde lo necesites.

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 componentesAñade un componente interactivo

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";

<Calculator client:load rate={4.5} />
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

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

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 <details> 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 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.

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 <style> de Vue o import "./card.css", no se añade al sitio.

¿Puedo editar páginas MDX en el editor del navegador?

Todavía no. El editor que abre npm run dev solo enumera páginas .md, así que edita las páginas .mdx en tu editor de código.

Empieza con un solo comando.
Tendrás un sitio funcionando en un minuto.

npm create vagejs@latest my-site

Leer la documentaciónÚsalo con tu asistente de IA