MDX

MDX es un formato autorizable que le permite escribir sin problemas JSX en sus documentos de Markdown.

Agregue gatsby-plugin-mdx y MDX como dependencias

SHELL

npm i -S gatsby-plugin-mdx @mdx-js/mdx@latest @mdx-js/react@latest

Uso

Después de instalar gatsby-plugin-mdx, puede agregarlo a la lista de complementos en el archivo gatsby-config.js.

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/sections/`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

De manera predeterminada, esta configuración le permitirá crear automáticamente secciones con archivos .mdx en src/sections

Tenga en cuenta que gatsby-plugin-mdx requiere que el sistema de archivos gatsby-source esté presente y configurado para procesar archivos de markdown locales para generar los nodos resultantes de Gatsby.

Finalmente, agregue un archivo .mdx en la carpeta src/sections

src/sections/intro.mdx

# Hello, I'm Khriztianmoreno 👨🏼‍💻.

I'm a FullStack Javascript Developer 👨🏻‍💻
On a daily basis I use: JavaScript (ES6), React, Gatsby, CSS (inJS), GraphQL, just to name the most important bits.

Componente Hero

Vamos a crear un componente Hero donde vamos a mostrar la informacion de este archivo MDX

src/components/hero.jsx

import React from 'react'

import Intro from '../sections/intro.mdx'

const Hero = () => <Intro />

export default Hero

Ahora solo es necesario actualizar la pagina index.js de la carpeta page para agregar este componente y verlo funcionando.

src/pages/index.js

import React from 'react'

import SEO  from '../components/seo'
import Hero  from '../components/hero'

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Hero />
  <Layout>
)

export default IndexPage

Recargamos y vamos al navegador:

MDX

Código de referencia: Github