We will use the React-Remarkable library to render markdown onto our React DOM.
This library uses the Remarkable library to render markdown.

**Installation Guide**

npm install --save react-remarkable


**Importing Guide**

import Markdown from 'react-remarkable'

https://app.egghead.io/api/v1/lessons/react-render-markdown-using-react-with-react-remarkable/subtitles

Render Markdown using React with React-Remarkable

[00:01] I have a basic React project set up now. First, we'll go ahead and install the React-Remarkable library. The React-Remarkable library gives you a Markdown component that renders Markdown onto your HTML. Once you have it installed, we can go ahead and import it.

[00:23] We'll import Markdown from our React-Remarkable library. Once we have the Markdown imported, we can go ahead and clear the boilerplate code, and add our Markdown component. It takes in a parameter of source, which will be rendered onto our HTML.

[00:45] We just pass in the ID. We can call this, this is a heading. If you refresh the browser, you can see that the Markdown has been rendered as expected. Now, we'll add another Markdown component, and we'll pass in the Markdown this time as a child element.

[01:08] Let's write in text in bold. Let's go and refresh our browser. You can see there is an error. It says that adjacent JSX element must be wrapped in an enclosing tag. Let's go ahead, take our elements, and enclose it in a div tag. As you can see, the text is rendered in bold.

Render Markdown using React with React-Remarkable

Share this video with your friends