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.