1
00:00:00,150 --> 00:00:07,320
OK, so we've got our state value, and as we're typing, of course, we display that in two places

2
00:00:07,920 --> 00:00:12,560
with this play that and our text area as well as the result.

3
00:00:13,170 --> 00:00:18,330
However, since I'm typing here the mark down, I wouldn't want to display that gibberish.

4
00:00:18,330 --> 00:00:26,460
And the result, I actually would want to display my HMO and there many libraries on there that do that

5
00:00:26,790 --> 00:00:28,020
for no particular reason.

6
00:00:28,020 --> 00:00:30,410
I chose react markdown.

7
00:00:30,810 --> 00:00:32,630
So that's the package work on two years.

8
00:00:32,940 --> 00:00:36,120
If you want to navigate with our docs, just type react markdown.

9
00:00:36,330 --> 00:00:41,640
And then of course, one of the first links of that is going to pop up is going to be their documentation

10
00:00:42,000 --> 00:00:43,680
as far as installed for your own project.

11
00:00:44,740 --> 00:00:47,230
You're going to have to go with NPM install reac, Margot.

12
00:00:47,560 --> 00:00:54,160
And of course, I already install it for this project and the basic setup is as straightforward as it

13
00:00:54,160 --> 00:00:54,490
gets.

14
00:00:54,970 --> 00:00:59,530
We have a default import from the library online.

15
00:00:59,590 --> 00:01:01,470
That is our component.

16
00:01:01,870 --> 00:01:10,450
And inside of the component as a child, we just pass whatever we would want to pipe through the component

17
00:01:10,660 --> 00:01:14,020
and then as a result we are going to get the HDMI.

18
00:01:14,380 --> 00:01:19,840
Now, of course, they have more complicated setups as well, but in this project, I'm not going to

19
00:01:19,840 --> 00:01:20,290
cover them.

20
00:01:20,460 --> 00:01:22,120
You need them for your own project.

21
00:01:22,540 --> 00:01:27,940
Just navigate through their docs and go over the other setups they provide.

22
00:01:28,210 --> 00:01:30,850
So in my case, I'm going to navigate back to our project.

23
00:01:31,120 --> 00:01:36,360
I already imported the default import from the Iraq Margon online.

24
00:01:36,400 --> 00:01:42,760
I would want to pipe through my markdown, so I'm going to navigate to the article since that's where

25
00:01:42,760 --> 00:01:50,200
I would want to display my demo and we're going to go with our component online or replace the markdown

26
00:01:50,200 --> 00:01:50,680
inside.

27
00:01:51,170 --> 00:01:58,670
Now, of course, notice as I'm typing here, Mark down as a result, I'm getting the demo.

28
00:01:58,870 --> 00:01:59,890
Now, if you don't believe me.

29
00:02:00,810 --> 00:02:07,900
Couldn't navigate a bigger browser, and you'll notice that in the result, this is already a heading

30
00:02:07,900 --> 00:02:09,420
to turn here.

31
00:02:09,920 --> 00:02:16,300
This is what I'm typing right now in a text error, because we know that in the markdown, if we would

32
00:02:16,300 --> 00:02:21,060
want to set up a heading, we would need to go with hash tag online for having one.

33
00:02:21,070 --> 00:02:24,730
Of course, that is going to be one hash tag and line for having sex.

34
00:02:25,010 --> 00:02:27,460
That is going to be six hash tags.

35
00:02:27,730 --> 00:02:32,500
So in this case, I have two hash tags online, whatever value for my text.

36
00:02:32,780 --> 00:02:40,870
And then, of course, as a result, I get this heading to in my article with class result and we're

37
00:02:40,870 --> 00:02:43,060
pretty much done with functionality.

38
00:02:43,070 --> 00:02:48,510
The only thing that I would want right now is to test it, how it's going to work.

39
00:02:48,790 --> 00:02:51,330
And along the way I show you some gotchas.

40
00:02:51,760 --> 00:02:53,800
So start with heading to markdown.

41
00:02:53,860 --> 00:02:55,710
And you know what I think of must do?

42
00:02:55,790 --> 00:02:58,540
Man, I bet just so we can see a little bit clearer.

43
00:02:59,570 --> 00:03:06,260
And then I'm going to go with some kind of coat and I'm going to say here is a quote quote by someone

44
00:03:06,280 --> 00:03:17,780
famous, by someone famous like so one out, one heading, six show or four, whatever, whichever heading

45
00:03:17,780 --> 00:03:18,410
you would want.

46
00:03:18,830 --> 00:03:20,190
And I'm here to say hello, world.

47
00:03:20,210 --> 00:03:25,010
And as you can see right now, we have heading to and then we have five sense.

48
00:03:25,010 --> 00:03:27,160
Of course, I have five hashtags.

49
00:03:27,170 --> 00:03:32,720
Again, if you want to double check, just inspect the article and you'll notice that you have had to

50
00:03:32,900 --> 00:03:35,690
have blockquote as well as the heading five.

51
00:03:36,050 --> 00:03:41,600
What I would want to set up of the paragraph and as far as the text, I'm going to go with lorem text,

52
00:03:41,780 --> 00:03:47,780
but I'm going to get it from my favorite place, the hip, some website, and I'm just going to grab

53
00:03:47,780 --> 00:03:52,240
one sentence and navigate back and we're going to copy and paste.

54
00:03:52,490 --> 00:03:57,870
So that is my text and this is how it's going to look like as far as HMO.

55
00:03:58,340 --> 00:04:04,340
Now, I would want to showcase how we can add the Botox, so we need to start here.

56
00:04:05,670 --> 00:04:09,110
So, for example, I would want this one to be bold and of course, there it is.

57
00:04:09,510 --> 00:04:14,310
And if you want to tell you, just go with one star, one star here.

58
00:04:15,270 --> 00:04:23,370
Online, I want to close it as well, so notice how the rest of the text essentially is a thali, then

59
00:04:23,370 --> 00:04:25,980
we can take a look at how we can be on our list.

60
00:04:26,310 --> 00:04:30,830
And not to do that, we just go with hyphen online, whatever value.

61
00:04:31,200 --> 00:04:37,880
So we're going to go with first and second and third, something like that.

62
00:04:37,890 --> 00:04:41,160
And then notice I have my own artlessly now.

63
00:04:41,190 --> 00:04:48,010
I'm going to close it here because I don't think we need to showcase the console anymore online.

64
00:04:48,030 --> 00:04:53,340
If you want wordlist, you do the same thing or the difference is that you go with the number and then

65
00:04:53,350 --> 00:04:59,750
that second, first line, second and third mark.

66
00:04:59,820 --> 00:05:05,820
So, so we have these three values and then if you want to display the code, you go with the old character

67
00:05:05,820 --> 00:05:08,330
which is left off number one.

68
00:05:08,760 --> 00:05:14,660
So we go like this and replace whichever code you would want inside this case.

69
00:05:14,670 --> 00:05:19,530
I'm going to go with alert and I'm just going to invoke it now, right here.

70
00:05:19,830 --> 00:05:23,700
Now I have my code displayed in this fashion.

71
00:05:24,150 --> 00:05:29,690
And then two more things that I want on Strokers is the link as well as the image.

72
00:05:30,000 --> 00:05:37,560
So if you want to have a link, which is go with square brackets and we have parentheses and we're just

73
00:05:37,560 --> 00:05:42,790
going to type one, what is going to be the name for the link in this case, Google and mine?

74
00:05:42,840 --> 00:05:47,280
As far as the value, we just need to go with your arrow here.

75
00:05:47,280 --> 00:05:54,630
I'm going to go with the world's largest online Google dot com, and you'll notice that once you click,

76
00:05:55,080 --> 00:05:59,280
you're going to navigate to Google and Microsoft can navigate back.

77
00:05:59,550 --> 00:06:05,190
And then the last one is the image where, again, we go with square brackets and then we have some

78
00:06:05,190 --> 00:06:06,750
kind of value zone here.

79
00:06:06,750 --> 00:06:07,680
I'll type image.

80
00:06:08,010 --> 00:06:16,350
And then as far as the value, I'll navigate to Paxos and then we're just going to get the image address.

81
00:06:16,710 --> 00:06:18,420
In this case, that's what we're looking for.

82
00:06:18,840 --> 00:06:26,010
Then we're navigating back copy and pasting and then for the image, we need the exclamation point as

83
00:06:26,010 --> 00:06:26,250
well.

84
00:06:26,550 --> 00:06:30,780
And now notice how we have the image in our markdown.

85
00:06:31,110 --> 00:06:37,110
Now, one Gotcher that I would want to show is that, of course, the success here is not by default.

86
00:06:37,440 --> 00:06:43,350
But remember one thing again, if we inspect this is just straight up demo.

87
00:06:43,830 --> 00:06:46,470
So we have our paragraph's we have our list.

88
00:06:46,770 --> 00:06:50,970
And then we also have this pre and in that pre we have the code.

89
00:06:51,210 --> 00:06:56,970
And then also we have a paragraph with a link as well as the image.

90
00:06:57,450 --> 00:07:02,700
So the Gotcher here is that if you want to style it differently, you just need to apply yourself.

91
00:07:03,120 --> 00:07:09,060
So if you navigate right now to my index, she says, you'll notice that.

92
00:07:09,060 --> 00:07:12,540
Yeah, I styled, of course, the markdown, the input and all of that.

93
00:07:12,900 --> 00:07:14,610
But if you keep on scrolling.

94
00:07:15,800 --> 00:07:19,860
These are the styles that you're seeing in the result.

95
00:07:20,150 --> 00:07:25,550
So essentially, I know that if there's going to be a blockquote, then I'm going to start in this way.

96
00:07:25,850 --> 00:07:28,340
If there's going to be an image, I'm going to start this way.

97
00:07:28,550 --> 00:07:32,570
And hopefully you get the gist where you are the king of the castle.

98
00:07:33,230 --> 00:07:38,090
If you know that you would want to display the barcode in one way, then just have access, because

99
00:07:38,090 --> 00:07:43,070
you know that there's going to be a black element if you would want to style image differently than

100
00:07:43,070 --> 00:07:48,110
I did because I just went with two hundred and two hundred pixels, which you can definitely do that.

101
00:07:48,380 --> 00:07:52,700
Hopefully everyone enjoyed the project and I hope to see your next one.