MDX Test

MDX Technology Links


"React is a JavaScript library for building user interfaces. It is an open-source, front end, JavaScript library.

React code is made of entities called components. Components can be rendered to a particular element. A component is the core building block of a React application. Every component resides in the same space, but works independently from one another and merges all them in a parent component, which is the final UI of the application."

React JSX

"JSX (JavaScript XML), is a React extension. It allows writing JavaScript code that looks like HTML, JSX is an HTML-like syntax that is used by React that extends ECMAScript so that HTML-like syntax can co-exist with JS/React code."


"MDX enables seamlessly writing JSX in Markdown documents. Components can be used, such as interactive charts or alerts, and embed them within MDX content. This makes writing long-form content with components a blast 🚀."

mdx-js /specification

"MDX is superset of the CommonMark specification that adds embedded JSX and import/export syntax. The official media type to label MDX content is text/mdx, and the file extension is .mdx."

MDX: Markdown for the component era 🚀

"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.

❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.

💻 Everything is a component: Use existing components inside your MDX and import other MDX files as plain components.

🔧 Customizable: Decide which component is rendered for each markdown element ({ h1: MyHeading }).

📚 Markdown-based: The simplicity and elegance of markdown remains, you interleave JSX only when you want to.

🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage."

Gatsby Development Environment

"When working with Gatsby.js, the built-in command line interface (CLI) is used frequently. This essential tool allows do things like creating new projects from starters, launching a dev server with hot-reloading, and generating production builds.

The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package. The Gatsby CLI is available via npm and should be installed globally by running: npm install -g gatsby-cli"

Gatsby - MDX

"MDX is Markdown for the component era enabling writing JSX embedded inside Markdown. This combination allows using Markdown’s terse syntax (such as # Heading) for content and JSX for more advanced or reusable components."


"Before MDX, some of the benefits of writing Markdown were lost when integrating with JSX. Implementations were often template string-based which required lots of escaping and cumbersome syntax.

MDX makes writing with Markdown and JSX simpler while being more expressive. Writing is fun again when you combine components, that can even be dynamic or load data, with the simplicity of Markdown for long-form content."

Creating Dynamic Navigation in Gatsby

"At times you will want to be able to edit your website’s navigation in response to a change in requirements. To achieve this, you can use Gatsby to dynamically generate your navigation. "