React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

MDX has the tagline *markdown for the component era*. It aims to make authoring with Markdown and JSX simpler, allowing you to use components for rich interaction and data-loading, while keeping long form content fun to write with classic Markdown.

This collection includes lessons on configuring MDX, setting it up specifically in Gatsby sites, and ideas for different components you can use including: 
- inline sign up form components
- live code editing components
- table of contents components
- other 3rd party components like the `Divider` and `Message` components from Theme UI

Customizations like using default layouts for MDX content and styling MDX components with Theme UI are also covered.

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀

Introduction to MDX

Learn how to install and configure `gatsby-plugin-mdx` in a Gatsby site, so that you can begin to import and render React components inline with your markdown.

Get additional context and instructions in the [Gatsby docs](https://www.gatsbyjs.org/docs/mdx/getting-started/#add-mdx-to-an-existing-gatsby-site)

Set up a Gatsby site to use MDX with gatsby-plugin-mdx with a default layout

Learn how to import and use a custom React component inline with markdown. You can use custom or third party components installed from other places.

See more instructions and additional context in the [Gatsby docs for importing components in MDX](https://www.gatsbyjs.org/docs/mdx/importing-and-using-components/)

Import and use a React component in Markdown with MDX

MDX allows you to use JSX and React components directly inline in your Markdown. Here's how.

Use a React Component from NPM in an MDX File with Gatsby MDX

When you use a component for your table of contents in MDX documents you have more flexibility around how you render it. In this lesson, we'll use Gatsby's GraphQL data layer to fetch the headings in an MDX document and pass them to a TableOfContents component that we create.

Create a Table of Contents Component for MDX Documents in Gatsby

One exciting use case for MDX is the ability to render markdown code blocks as live code right on your website. In this lesson, we use React Live to implement a live editable codeblock.

Create a Live Code Component with Gatsby MDX and React Live

Learn how to make imported components globally available across all of your MDX pages. The `MDXProvider` is able to "provide" MDX children nodes with components so you don't need to import them in every document they are used in.

You can read about the `MDXProvider` in the [MDX docs](https://mdxjs.com/migrating/v1#mdxprovider).

Or see more instructions and additional context in the [Gatsby docs for using shortcodes](https://www.gatsbyjs.org/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes).

Make React components globally available as shortcodes in MDX

MDX allows you to control the rendering of any element from your markdown document, such as the heading, paragraphs, or code blocks. MDXProvider is a component that can be used to supply React components to control the rendering for these components.

Use MDXProvider to Control the Rendering of Markdown Elements with Gatsby MDX

[Theme UI](https://theme-ui.com) provides a wrapper around the MDXProvider so you can add styling to components that are rendered in your MDX documents. The styling you add will not be leaked as global styles since it relies on React Context and Emotion. The values set in the `styles` object are [theme-aware](https://theme-ui.com/theming) so you can ensure consistency when applying color and typographic styles to your content.

This lesson uses `gatsby-plugin-theme-ui` in order to seamlessly integrate Theme UI into a Gatsby site.

Using components in Markdown with MDX

Kyle Gill

Course Content