How to use JSX in markdown documents

Have you ever wondered what if there is a way to write JSX in markdown documents. That will make writing code faster like never before. MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. In this article we will gonna learn how to use JSX in markdown documents.

What is MDX ?

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.

For example

import { Chart } from '../components/chart'

# Here’s a chart

The chart is rendered inside our MDX document.

<Chart />

MDX is markdown for the component era. It lets you write JSX embedded inside markdown. That’s a great combination because it allows you to use markdown’s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

Features of MDX

It offers a lot of features but most important features are given below:

• Blending JSX and markdown makes it powerful.
• You can use existing components inside your MDX.
• We can import MDX files as components.
• Decide which component is rendered for each markdown element ({ h1: MyHeading }).
• All compilation occurs at build time this makes its super fast.

Usage

You can initialize your project using below command

npm init mdx

You can read how to setup MDX with Webpack, Parcel, Create React App, Next.js and Gastby from official documents.

Comparison

<h1>Hello, world!</h1>

# Hello, world!

Both syntax will gonna show same output.

Traditionally, Markdown is used to generate HTML. Many developers like writing markup in Markdown as it often looks more like what’s intended and it is typically terser.

Instead of the following HTML:

<blockquote>
  <p>A blockquote with <em>some</em> emphasis.</p>
</blockquote>

You can write.

> A blockquote with _some_ emphasis.

Demo

I hope you have learned about how we can use markdown with JSX using MDX.

Tip 2: Create an array of n size without lodash