Una introducción a MDXJS

Markdown ha sido habitualmente el formato favorito de los programadores para escribir documentación. Es lo suficientemente simple como para que casi todos lo aprendan y se adapten, al mismo tiempo que facilita el formato y el estilo del contenido. Fue tan popular que los comandos de Markdown se han utilizado en aplicaciones de chat como Slack y Whatsapp como aplicaciones de documentos, como Dropbox Paper y Notion. Cuando GitHub introdujo el soporte de Markdown para la documentación README, también renderizaron contenido HTML a partir de ella; por ejemplo, podríamos colocar algunos enlaces y elementos de imagen y se renderizarían bien.

Aunque Markdown no se rompe ni por asomo, siempre hay margen de mejora. Aquí es donde entra en juego Markdown Extended (MDX).

¿Cuándo consideraríamos MDX en lugar de Markdown? Una cosa acerca de MDX es que JavaScript se puede integrar en casos donde se usa Markdown normal. Aquí hay algunos ejemplos que ilustran lo útil que es:

• Frontend Armory utiliza MDX en su área de juegos educativos, Demoboard. El área de juegos admite MDX de forma nativa para crear páginas que sirvan como demostración y documentación, lo cual es ideal para demostrar conceptos y componentes de React.
• Brent Jackson tiene una forma completamente nueva de crear sitios web que combinan MDX y Styled System. Cada página está escrita en MDX y Styled System diseña los bloques. Actualmente está en desarrollo, pero puedes encontrar más detalles en el sitio web.
• Usar mdx-deck o Spectacle podría hacer que su próxima presentación sea más interesante. ¡Puedes mostrar demostraciones directamente en tu plataforma sin cambiar de pantalla!
• MDX Go, ok-mdx y Docz proporcionan herramientas para documentar bibliotecas de componentes en MDX. Puede colocar componentes directamente en la documentación con Markdown y simplemente funcionará™.
• Algunos sitios, incluidos Zeit Now y Prisma docs, utilizan MDX para escribir contenido.

MDX brilla en los casos en los que desea mantener un blog basado en React. Usarlo significa que ya no tienes que crear páginas de componentes de React personalizados cuando quieras hacer algo imposible en Markdown (o crear un complemento). Lo he estado usando en mi blog durante más de un año y me ha encantado la experiencia. Uno de mis proyectos favoritos hasta ahora es un componente de React al que llamo Playground que se puede utilizar para realizar demostraciones de pequeños fragmentos de HTML/CSS/JavaScript mientras permite a los usuarios editar. el código. Claro, podría haber usado algún servicio de terceros e incorporar demostraciones con él, pero de esta manera no tengo que cargar ningún script de terceros.

Hablando de incrustar, MDX hace que sea muy fácil incrustar iFrames creados por servicios de terceros, como YouTube, Vimeo, Giphy, etc.

Úsalo junto con Markdown

Sabrá que un archivo está escrito en MDX porque tiene una .mdxextensión en el nombre del archivo. Pero veamos cómo se ve realmente escribir algo en MDX.

import InteractiveChart from "../path/interactive-chart";
# Hello - I'm a Markdown heading
This is just markdown text
InteractiveChart /

¿Mira eso? Todavía es posible usar Markdown y podemos escribirlo junto con los componentes de React cuando queramos visualizaciones o estilos interactivos. Aquí hay un ejemplo de mi portafolio:

Otro beneficio de MDX es que, al igual que los componentes, los archivos se pueden componer. Esto significa que las páginas se pueden dividir en varios fragmentos y reutilizar, renderizándolas todas a la vez.

import Header from "./path/Header.mdx"import Footer from "./path/Footer.mdx"Header /# Here goes the actual content.Some random content goes [here](link text)Footer /

Implementación de MDX en aplicaciones

Existen complementos MDX para la mayoría de las plataformas de integración basadas en React comunes, como Gatsby y Next.

Para integrarlo en un proyecto create-react-app, MDX proporciona una macro de Babel que se puede importar a la aplicación:

import { importMDX } from './mdx.macro' const MyDocument = React.lazy(() = importMDX('./my-document.mdx')) ReactDOM.render(  React.Suspense fallback={divLoading.../div}    MyDocument /  /React.Suspense,  document.getElementById('root'));

También puedes probar MDX en el área de juegos que crearon para ello.

Los contribuyentes de MDX están trabajando muy activamente para brindar soporte para Vue. Ya hay una muestra disponible en GitHub. Sin embargo, esto está en Alpha y no está listo para producción.

Soporte de edición

El resaltado de sintaxis y el autocompletado han aumentado el soporte para VS Code , Vim y Sublime Text . Sin embargo, cuando se usan, tienen algunos bordes afilados y son difíciles de navegar. Muchos de estos provienen de la incapacidad de predecir si optaremos por JavaScript o Markdown dentro del contexto de una página. Eso es algo que ciertamente se puede mejorar.

Complementos y extensiones MDX

Una ventaja clave de MDX es que forma parte del consorcio unificado de contenido que organiza el contenido de comentarios. Esto significa que MDX puede respaldar directamente el vasto ecosistema de complementos de comentarios y complementos de revalorización; No hay necesidad de reinventar la rueda. Algunos de estos complementos, incluidos remark-images y remark-redact, son notables, por decir lo menos. Para utilizar un complemento con MDX, puede agregarlos a su cargador o complemento correspondiente. Incluso puede escribir sus propios complementos MDX consultando la Guía MDX para crear complementos.

MDX tiene solo unos pocos años, pero su influencia ha ido creciendo en el espacio del contenido. Desde escribir publicaciones de blog y visualizar datos hasta crear presentaciones y demostraciones interactivas, MDX es ideal para muchos usos, mucho más allá de lo que hemos cubierto aquí en esta introducción.