# MDX

### **Agregue `gatsby-plugin-mdx`** y MDX como dependencias

{% code title="SHELL" %}

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

{% endcode %}

### Uso <a href="#usage" id="usage"></a>

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

{% code title="gatsby-config.js" %}

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

{% endcode %}

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

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`&#x20;

{% code title="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.
```

{% endcode %}

### Componente Hero

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

{% code title="src/components/hero.jsx" %}

```jsx
import React from 'react'

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

const Hero = () => <Intro />

export default Hero
```

{% endcode %}

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

{% code title="src/pages/index.js" %}

```jsx
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
```

{% endcode %}

Recargamos y vamos al navegador:

![MDX](https://2295029359-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LpaRvGbXuS6rD49Moww%2F-LpacteeUJTJS1LmnIo9%2F-LpaiKyzO-zReVbXRpTF%2FScreen%20Shot%202019-09-24%20at%2011.41.06%20PM.png?alt=media\&token=75d11b36-0b94-4264-8e9e-ac076de0e558)

{% hint style="info" %}
**Código de referencia**: [Github](https://github.com/khriztianmoreno/workshop-gatsby/commit/6c8116d631396fa78b69bb48609e3c2ed03fb706)
{% endhint %}
