MDX: Markdown con JSX

MDX es un formato que permite combinar Markdown con componentes JSX de React. Esto significa que puedes usar la sintaxis sencilla de Markdown para el contenido y, al mismo tiempo, incluir componentes interactivos de React directamente en el documento.

¿Qué es MDX?

MDX extiende Markdown permitiendo importar y usar componentes de React. Un archivo .mdx puede contener tanto sintaxis Markdown como código JSX:

import { Grafico } from './components/Grafico'

# Mi artículo

Este es un párrafo normal de Markdown.

<Grafico datos={[1, 2, 3, 4, 5]} />

Y aquí sigue más texto en Markdown.

Sintaxis básica

Importar componentes

import { MiComponente } from './MiComponente'

Usar componentes en el contenido

# Título

Texto normal de Markdown.

<MiComponente prop="valor" />

Más texto de Markdown.

Exportar datos

const metadata = {
  author: 'Eduardo',
  date: '2024-01-15'
}

# {metadata.author}

Ventajas de MDX

Estas son las principales ventajas de usar MDX:

• Componentes reutilizables: Crea componentes una vez y úsalos en cualquier documento.
• Interactividad: Añade gráficos, formularios o cualquier elemento interactivo.
• Tipado: Compatibilidad con TypeScript para los componentes.
• Ecosistema React: Acceso a todo el ecosistema de componentes de React.

Herramientas compatibles con MDX

Estas son las principales herramientas compatibles con MDX:

• Next.js: Con el plugin @next/mdx.
• Gatsby: Con gatsby-plugin-mdx.
• Docusaurus: Soporte nativo de MDX.
• Remix: Con soporte para MDX.
• Astro: Soporte nativo de MDX.