All language subtitles for 012 Rendering Markdown As JSX_Downloadly.ir_en

So it's time to convert that Markdown,

and for that we'll install a third party package.

So I'll quit my development server,

and npm install a new package which will help us with that.

And that package is the react-markdown package.

This package takes Markdown and outputs it as JSX.

So we need to install that package.

And once that's done, we can restart the development server,

and in the post-content JS file,

import ReactMarkdown, with a capital R at the beginning

because this will act as a component from react-markdown.

So we import the ReactMarkdown component

from that react-markdown package we just installed.

Now, if we go down here, what we can do

is instead of outputting our content like this,

we output ReactMarkdown, this component here,

and between the Opening and Closing Tags,

we pass our content just like this.

If we do that, you'll notice something interesting.

If we reload, this now changed its style.

The hash is gone, and if we inspect this

it's rendered as an h1 tag.

So it was translated to a title.

So this Markdown to JSX translation works

simply by adding this component,

which is of course awesome and really makes our life easier.

Now we're going to come back to this component later,

when it comes to rendering Inline Images.

So Images as part of our posts,

and when it comes to rendering Code Snippets

because there we'll then tweak it a little bit,

but for the moment it just works.

And therefore, as a next step, before we tweak this anymore

and before we dive deeper into that,

let's now replace all that dummy content

with some actual content

because we got all the building blocks, now.

We got the core pages.

We understand that we plan to use Markdown,

and therefore we're now ready to take the next step.

Add a real data source,

then load data from that source,

and then render that data.