Create and import React components with Markdown using MDXC

Instructor: [00:00] In this lesson, we're going to look at using the library MDXC to convert Markdown into a React component. It sounds magical because it is. The best way to explain this is by example. Let's jump right in.

[00:11] I'm going to use Create React App to start with, so I'll go ahead and install it. I'll do that with MPX, so we'll say mpx create react app. We'll call it mdxcexample. Now that that's finished installing, I need to go ahead and cd into it, and install a couple of dependencies.

[00:27] We'll say yarn add mdxc babel-loader and mdx-loader. I'll go ahead and open this in code, so I'll just say code.. One of the last things I'll need to do to get set up here is add a babelrc file. I'm going to say babelrc, and I'm going to paste this preset in for React App, close this and get rolling.

[00:51] First, I'm going to start my app with yarn start and move a couple things around. Going to go ahead and open the app component that comes with Create React App. Since this is a Markdown lesson, let's go ahead and add some Markdown.

[01:07] I'm going to create a new file called helloworld md, stick it right in the source directory, and add some Markdown. We'll say heading1 and heading2. Go and save that, open my app js file again.

[01:24] What MDXC allows us to do is import that Markdown file as a React component. Import, we'll say helloworld from helloworld. This is just one way that MDXC suggests importing the Markdown file. You could clean this up by webpack or even use their API. Just check the docs for more information.

[01:50] We'll go ahead and save, and we'll need to do one more thing. Since I'm using Create React App, it has its own ESLint presets for how you import components. We can overwrite this behavior for this example by adding a comment at the top of the file to let ESLint know to be quiet.

[02:05] Now to utilize our import component to see if it works. I'll simply call helloworld. Pretty cool, right? What's happening here? MDXC is taking the Markdown found in helloworld and converting it to JavaScript for us to consume as a React component.

[02:22] We can do some pretty cool stuff with this, like pass props into the component like normal, and retrieve them in our Markdown. I'm going to go ahead and add a prop called text, and we'll just add a little bit of gibberish in there, like blah, blah, blah.

[02:36] The way that we retrieve this prop within our Markdown is by adding prop text. This value will have to be called within a jsx block to be used. Luckily, MDXC gives us the ability to write jsx directly in our Markdown, so we can do something like this.

[02:56] Something else that's really handy is being able to import an existing component. If I create a new component called bold.js, we'll create a functional component called bold.receivethechildren prop, and returns a bold tag with the children in it. Pretty simple.

[03:17] I'll need to go ahead and import React up here. I'm getting errors. Then, my helloworld Markdown file, I can add a import for bold just like normal. We'll say bold. Now, I could just call this like normal. We'll say bold and say this text is bold. Boom.

[03:41] That's how you import a React component into a Markdown file using MDXC. To take it a step further, we can import other Markdown component files as well. To go along with my bold component, I'm going to create an italic component but use Markdown instead of JavaScript this time.

[03:55] I'm going to create a new file called italic.md and add an italic tag with children in it. Go back to helloworld, and I'll need to import it here. I'll say import italic from...This is where we have to use our loaders again. We'll say babel-loader, mdx-loader, and italic.md.

[04:23] Well use it down here below our bold tag. I'll just copy this, and we'll go ahead and change this to italic. It looks like it's working. It's pretty cool stuff. Check out the MDCX documentation for more information and examples.