1
00:00:02,000 --> 00:00:04,000
So it's time to convert that Markdown,

2
00:00:04,000 --> 00:00:07,000
and for that we'll install a third party package.

3
00:00:07,000 --> 00:00:09,000
So I'll quit my development server,

4
00:00:09,000 --> 00:00:14,000
and npm install a new package which will help us with that.

5
00:00:14,000 --> 00:00:18,000
And that package is the react-markdown package.

6
00:00:18,000 --> 00:00:23,000
This package takes Markdown and outputs it as JSX.

7
00:00:24,000 --> 00:00:26,000
So we need to install that package.

8
00:00:28,000 --> 00:00:32,000
And once that's done, we can restart the development server,

9
00:00:32,000 --> 00:00:36,000
and in the post-content JS file,

10
00:00:36,000 --> 00:00:41,000
import ReactMarkdown, with a capital R at the beginning

11
00:00:41,000 --> 00:00:46,000
because this will act as a component from react-markdown.

12
00:00:47,000 --> 00:00:50,000
So we import the ReactMarkdown component

13
00:00:50,000 --> 00:00:55,000
from that react-markdown package we just installed.

14
00:00:55,000 --> 00:00:57,000
Now, if we go down here, what we can do

15
00:00:57,000 --> 00:01:01,000
is instead of outputting our content like this,

16
00:01:01,000 --> 00:01:05,000
we output ReactMarkdown, this component here,

17
00:01:06,000 --> 00:01:09,000
and between the Opening and Closing Tags,

18
00:01:09,000 --> 00:01:12,000
we pass our content just like this.

19
00:01:12,000 --> 00:01:15,000
If we do that, you'll notice something interesting.

20
00:01:15,000 --> 00:01:19,000
If we reload, this now changed its style.

21
00:01:19,000 --> 00:01:22,000
The hash is gone, and if we inspect this

22
00:01:22,000 --> 00:01:24,000
it's rendered as an h1 tag.

23
00:01:24,000 --> 00:01:28,000
So it was translated to a title.

24
00:01:28,000 --> 00:01:32,000
So this Markdown to JSX translation works

25
00:01:32,000 --> 00:01:35,000
simply by adding this component,

26
00:01:35,000 --> 00:01:39,000
which is of course awesome and really makes our life easier.

27
00:01:40,000 --> 00:01:42,000
Now we're going to come back to this component later,

28
00:01:42,000 --> 00:01:46,000
when it comes to rendering Inline Images.

29
00:01:46,000 --> 00:01:49,000
So Images as part of our posts,

30
00:01:49,000 --> 00:01:52,000
and when it comes to rendering Code Snippets

31
00:01:52,000 --> 00:01:54,000
because there we'll then tweak it a little bit,

32
00:01:54,000 --> 00:01:57,000
but for the moment it just works.

33
00:01:58,000 --> 00:02:02,000
And therefore, as a next step, before we tweak this anymore

34
00:02:02,000 --> 00:02:04,000
and before we dive deeper into that,

35
00:02:04,000 --> 00:02:07,000
let's now replace all that dummy content

36
00:02:07,000 --> 00:02:10,000
with some actual content

37
00:02:10,000 --> 00:02:12,000
because we got all the building blocks, now.

38
00:02:12,000 --> 00:02:14,000
We got the core pages.

39
00:02:14,000 --> 00:02:17,000
We understand that we plan to use Markdown,

40
00:02:17,000 --> 00:02:21,000
and therefore we're now ready to take the next step.

41
00:02:21,000 --> 00:02:23,000
Add a real data source,

42
00:02:23,000 --> 00:02:26,000
then load data from that source,

43
00:02:26,000 --> 00:02:28,000
and then render that data.