📂How to compile and run MDX in React

Hi everyone!
Let's dive into our weekly project. Today, we'll explore MDX integration in ReactJS

The full project code is on GitHub.

To create this project there are 3 step you need to follow
~ Setup reactjs to use MDX
~ Create some MDX file
~ Create UI component to customize the markdown

1. Setup React.js to Use MDX

Start by installing all the necessary MDX packages. These typically include @mdx-js/react and any other dependencies required to integrate MDX with React.

If you're using React with Vite, also install @mdx-js/rollup and configure your vite.config.js as follows:

//vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [react(), mdx()],
})

2. Create Some MDX Files

Here's what mdx file post looks like:

##Understanding a Commit

In Git, a commit captures the state of your code at a particular moment. Each commit includes metadata such as the author, timestamp, and commit message. Commits are essential for tracking progress, documenting changes, and integrating work from different developers.

##Traits of an Effective Commit

Single-purpose and clear: A commit should be single-purpose, representing one logical change only. Avoid combining multiple unrelated changes into a single commit.

3. Create UI Components to Customize the Markdown

To style and structure our MDX content in React, we'll create two key components:

1. MDXComponents.jsx: This file defines custom React components for rendering various Markdown elements (e.g., headings, paragraphs, code blocks). It allows us to apply consistent styling and add extra functionality to our Markdown content.

2. Container.jsx: This component serves as a wrapper or layout for our MDX content. It utilizes the MDXProvider from @mdx-js/react to make our custom components available to the MDX content.

In Container.jsx, we import MDXProvider from @mdx-js/react and wrap our content with it:

import { MDXProvider } from "@mdx-js/react";
export const Container = ({ children }) => {

  return (
    <>
      <section className="mt-4 prose max-w-4xl ">
         <MDXProvider>{children}</MDXProvider>
       </section>   
    </>
  );
};

To display our MDX content, we'll use routing. In your main routing component (e.g., App.js or Routes.js), map over your routes and render the MDX components:

import { Route } from "react-router-dom";
import { MDXComponent } from "./MDXComponents.jsx";

// ... other imports

const routes = [
  { path: "first/", component: FirstContent },
  { path: "second/", component: SecContent },
];

{routes.map(({ path, component: Component }, index) => (
  <Route 
    key={index} 
    path={path} 
    element={
      <Component components={MDXComponent} />
    } 
  />
))}

In this setup:

• We import our MDXComponent .
• For each route, we render the MDX component inside our Container.
• The Container applies the layout and makes our custom MDX components available to the content.

This approach ensures that all our MDX content is consistently styled and structured across different routes in our React application.

---

🔥Thanks for watching

This setup provides total flexibility for managing your MDX content.

You can source MDX files from various places (like your computer, a web server, or a database) and effortlessly integrate them into your React application using the MDX service.🚀

🙏🏻 I hope this usefull for you
👉 Follow me on Instagram, Twitter, or here for more to updates.
👋🏻And Stay tune for more frontend projects.