1
00:00:00,120 --> 00:00:05,640
All right, and once we've got a clear idea what we're going to be working on, we're going to navigate

2
00:00:05,730 --> 00:00:06,530
to my.

3
00:00:07,530 --> 00:00:10,400
I'm looking for Project 16.

4
00:00:10,800 --> 00:00:12,600
It is marked down preview.

5
00:00:12,870 --> 00:00:15,110
Of course, I'm looking for a set of folder.

6
00:00:15,600 --> 00:00:18,990
So I'm going to open up my integrated terminal.

7
00:00:19,020 --> 00:00:20,820
I'm going to navigate back to the route.

8
00:00:21,330 --> 00:00:26,920
And then I'm going to say that I would like to navigate to report number 16.

9
00:00:27,330 --> 00:00:30,180
And then, of course, the setup folder here.

10
00:00:30,600 --> 00:00:37,480
And once we're here, as always, we just install all dependencies and then right away spin up the deficit

11
00:00:37,480 --> 00:00:39,390
ever so close to final one.

12
00:00:39,690 --> 00:00:43,550
That, of course, is where we have the final source code.

13
00:00:43,860 --> 00:00:49,170
And if you want to double check with the code that will be typing in this project to do that.

14
00:00:49,390 --> 00:00:51,480
But in my case, I don't need it.

15
00:00:51,930 --> 00:00:55,050
And if we check out of the app J.S..

16
00:00:56,160 --> 00:01:03,300
We should simply find one import from react marked down lumber, which we're going to cover in the next

17
00:01:03,300 --> 00:01:11,460
video, but apart from that, we should just have this heading to and I would want to start by navigating

18
00:01:11,460 --> 00:01:14,120
to a bigger browser window online.

19
00:01:14,160 --> 00:01:21,270
I'm going to open up localhost three thousand here, and then we're just going to make sure that we

20
00:01:21,270 --> 00:01:22,260
put them side by side.

21
00:01:22,710 --> 00:01:24,030
So this is my complete one.

22
00:01:24,030 --> 00:01:27,060
And then, of course, this is our star.

23
00:01:27,480 --> 00:01:34,610
And I simply would want to set up the general structure where we're going to have one extra.

24
00:01:35,070 --> 00:01:36,980
So this is where all type our markdown.

25
00:01:37,260 --> 00:01:40,410
And then, of course, I also want to display the result.

26
00:01:40,750 --> 00:01:43,700
So for the time being, we're not going to work with react markdown.

27
00:01:44,010 --> 00:01:45,870
We're just going to set everything up.

28
00:01:46,260 --> 00:01:52,110
So I'll close my integrated terminal and I'll start by setting up some kind of state value.

29
00:01:52,470 --> 00:01:54,540
And of course, we can call it whatever we want.

30
00:01:54,540 --> 00:01:59,800
But in my case, I'm going to go with Mark down and set Mark down.

31
00:02:00,270 --> 00:02:02,630
So this is going to be the value that we're going to be typing.

32
00:02:03,150 --> 00:02:06,370
And of course, we would also want to display it.

33
00:02:06,810 --> 00:02:10,200
So let's go here with use state.

34
00:02:10,500 --> 00:02:16,500
And as far as default value, I'm going to go with hashtag hashtag meaning heading to and then I'm going

35
00:02:16,500 --> 00:02:18,840
to call it markdown preview.

36
00:02:19,410 --> 00:02:25,590
Now, as you can see at the moment, I don't see anything, and that's because I haven't opened up the

37
00:02:25,620 --> 00:02:26,370
localhost.

38
00:02:26,520 --> 00:02:32,240
Three thousand I might have once I have my state value now, I would want to work on my RSX.

39
00:02:32,580 --> 00:02:37,620
So start by setting up the main tags and lines are the main tags.

40
00:02:37,920 --> 00:02:44,730
We're going to go with a section with a class of Margon, so let's go with section and then class of

41
00:02:44,760 --> 00:02:45,240
Magnon.

42
00:02:45,510 --> 00:02:53,740
So online we're going to have one text area and one article where we'll display the result.

43
00:02:54,120 --> 00:02:55,130
So here we go.

44
00:02:55,140 --> 00:02:55,840
Text area.

45
00:02:56,130 --> 00:03:03,030
Now we don't care about the name columns, the rows because we'll set everything up using CFS so you

46
00:03:03,030 --> 00:03:04,020
can remove all that.

47
00:03:04,260 --> 00:03:07,230
Just add a class name of input.

48
00:03:07,620 --> 00:03:14,820
And then as far as the value for the text area, I would want it to be this markdown because at the

49
00:03:14,820 --> 00:03:17,910
moment, notice, this is just an empty text area.

50
00:03:18,210 --> 00:03:26,040
But since I would want to make it as a controlled input, meaning as I'm typing anything in the text

51
00:03:26,040 --> 00:03:28,770
area, I will be invoking, said Makhdoom.

52
00:03:29,010 --> 00:03:38,520
So the value and also has a value, I will display that markdown over here and the same will work with

53
00:03:38,520 --> 00:03:39,270
a result.

54
00:03:39,420 --> 00:03:46,260
However, of course, the result will pipe through the react markdown because the value here is going

55
00:03:46,260 --> 00:03:47,140
to be a bit different.

56
00:03:47,430 --> 00:03:53,700
So just like with the regular input, we just set up a value and that one will be equal to my model.

57
00:03:53,970 --> 00:03:55,590
So whatever I'm typing.

58
00:03:56,010 --> 00:03:58,640
And then the second thing is that won't change.

59
00:03:59,040 --> 00:04:07,260
So as we're typing something in this area, which I would want to invoke my set markdown, so I would

60
00:04:07,260 --> 00:04:11,270
want to change that that value and I'll need the event target value.

61
00:04:11,640 --> 00:04:15,660
And of course, we'll pass the Senate and to set Makhdoom, that's our function.

62
00:04:15,930 --> 00:04:23,010
So we go here with E Target and then value and I think we're done with our text letter.

63
00:04:23,370 --> 00:04:29,670
So whatever we'll type over here, of course will be displayed in a text letter and we can add whatever

64
00:04:29,670 --> 00:04:30,390
we want as well.

65
00:04:30,400 --> 00:04:35,190
So for example, in this case I have marked down and if I want heading through.

66
00:04:36,340 --> 00:04:37,960
Can go with hello, people.

67
00:04:38,130 --> 00:04:44,430
Of course, nothing is being displayed, but at least I can see that as I'm typing something and the

68
00:04:44,430 --> 00:04:51,850
text area, while I'm changing my state value of Martineau and then side by side with the text area,

69
00:04:51,850 --> 00:04:59,800
we're going to go with article and then we'll have to add a class name result instead of the result.

70
00:04:59,950 --> 00:05:05,020
Eventually I will pipe my mark down through the Ariake Magnum.

71
00:05:05,020 --> 00:05:09,630
However, for the time being, we're just going to say mark down.

72
00:05:09,970 --> 00:05:13,620
And of course, as you're looking at your local business, it makes sense.

73
00:05:13,630 --> 00:05:16,420
We have one more now and then the second one again.

74
00:05:16,450 --> 00:05:20,710
Eventually this will get piped through the markdown and then, of course, we'll see the result.

75
00:05:21,070 --> 00:05:24,070
But that should be our general setup.

76
00:05:24,310 --> 00:05:31,450
So as I'm typing something here in text area, of course, I'm displaying also in Myersville.