Challenge 5 – Add React Components in Markdown

Hashim Warren
Hashim Warren
January 29th, 2020

Gatsby was named the #1 new technology to learn in 2020!

To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.

Learn more about #100DaysOfGatsby here!

Challenge 5: Mix Markdown and React Using MDX

Use React components within your Markdown-based blog posts!

Markdown is a great markup language for creating human readable, long form content. A writer on your team can use Markdown’s friendly syntax and contribute content to a site without having to edit HTML or JSX directly.

Today we invite you to use MDX, a new format that lets you add components in your Markdown documents. Now, editors can add interactive and styled elements to their documents, not just static, plain text.

Challenge Resources

Use Gatsby’s MDX tutorial and substitute the example “chart component” with the “form component” you created in a previous challenge.

Bonus: Learn about an advanced MDX feature, “shortcodes”. Then enable an example of this feature by using a Gatsby plugin from the community, gatsby-mdx-embed.

What to Do If You Need Help

If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.

For this challenge, you can also use the MDX support resources

Hashim Warren
Written by
Hashim Warren

Full Stack Marketer, writing copy and code - https://www.configmag.com

Follow Hashim Warren on Twitter

Talk to our team of Gatsby Experts to supercharge your website performance.