1
00:00:00,420 --> 00:00:05,940
So next will be moving on to creating the north component, which is like our review component.

2
00:00:06,360 --> 00:00:13,530
We're calling it a node right here, so that will be creating inside the components whole so you can

3
00:00:13,530 --> 00:00:15,320
call it at the view or ignored whatever.

4
00:00:15,320 --> 00:00:17,100
I just came up with that, not at all.

5
00:00:17,100 --> 00:00:22,980
Simple and certainly components will do the ad and all the ideas.

6
00:00:28,840 --> 00:00:35,520
Volunteers and the very first thing which we'll do is we'll import the boilerplate code of React using

7
00:00:35,530 --> 00:00:39,790
that extension and also tweak and sort of see.

8
00:00:40,900 --> 00:00:43,120
That's it for inside of here.

9
00:00:44,290 --> 00:00:50,230
Now we will, first of all, will give the basic structure and then will give the functionality like

10
00:00:50,470 --> 00:00:56,260
us, will like the how it will look and then it will provide the JavaScript.

11
00:00:56,860 --> 00:00:58,420
So first we provide the G6.

12
00:01:01,370 --> 00:01:05,360
So inside the very first thing which will do is through text, media.

13
00:01:07,200 --> 00:01:07,580
OK.

14
00:01:08,130 --> 00:01:13,440
So for next year, we will get some properties like doors and columns.

15
00:01:14,760 --> 00:01:19,770
Name is not required and will give.

16
00:01:21,140 --> 00:01:23,510
So ideal and so is not required right now.

17
00:01:26,180 --> 00:01:27,980
We'll give just two columns and it.

18
00:01:28,160 --> 00:01:33,890
It also read and columns are 10 columns, and those are it.

19
00:01:35,770 --> 00:01:39,770
So not to you know, it just eight is enough to offer that.

20
00:01:39,790 --> 00:01:48,130
What we'll do is we'll provide a placeholder, but there will be a place holder and we will give the

21
00:01:48,130 --> 00:01:52,840
value to it like Typekit a view here that I.

22
00:01:54,810 --> 00:01:55,470
To view.

23
00:01:56,600 --> 00:02:04,010
Well, and then two dots after that, we will have some on change and we'll provide the value, but

24
00:02:04,220 --> 00:02:08,450
we'll do that when we are doing other things like JavaScript.

25
00:02:08,900 --> 00:02:09,280
OK.

26
00:02:09,680 --> 00:02:16,230
After that, we'll be having a further to the North, which will be having the data, and it will swing

27
00:02:16,230 --> 00:02:22,090
those two characters on which characters are left to which we can write.

28
00:02:22,100 --> 00:02:28,550
It will have a publisher button, which we will like just click and our view will be poster or published.

29
00:02:28,970 --> 00:02:31,190
After that, we'll have another div.

30
00:02:39,190 --> 00:02:47,050
So inside, as do what we'll do is we'll write a character list and character land on which characters

31
00:02:47,050 --> 00:02:49,630
are left to that we write in small steps.

32
00:02:50,890 --> 00:02:53,320
Also inside this mall, we'll.

33
00:02:54,610 --> 00:03:02,020
First of all, we just tried to like 200 left field hard coding in total and nothing else.

34
00:03:02,710 --> 00:03:03,030
OK.

35
00:03:03,160 --> 00:03:08,770
So after this, we'll have a button that will be for the publishing thing.

36
00:03:09,250 --> 00:03:18,100
So that I need to import button from material away, so I will go ahead and whatever was the button.

37
00:03:19,000 --> 00:03:20,920
So I will copy is line.

38
00:03:21,610 --> 00:03:23,730
I will import department.

39
00:03:25,250 --> 00:03:26,470
So Burton is important.

40
00:03:27,760 --> 00:03:32,660
But after the small attack, that would be debatable, it's all inside here.

41
00:03:33,230 --> 00:03:34,900
Here they'll be debating.

42
00:03:37,450 --> 00:03:44,890
But then and that is done, it should be self closing, but just not so let me provide.

43
00:03:45,360 --> 00:03:45,940
OK, OK.

44
00:03:46,060 --> 00:03:48,010
Guard selfless executing.

45
00:03:48,820 --> 00:03:54,400
So inside the button, that would be in some text and that would be also an icon.

46
00:03:54,820 --> 00:03:57,040
So let's me read the text to actually publish.

47
00:03:57,370 --> 00:03:59,410
And after that, that would be an icon.

48
00:03:59,800 --> 00:04:05,980
Or that icon will grab somebody like, Oh, let's see which one we are going to use now.

49
00:04:06,850 --> 00:04:11,800
So we will be using up a low key like the upload thing.

50
00:04:12,890 --> 00:04:13,670
And this one.

51
00:04:15,640 --> 00:04:22,690
Well, Peter, this like this more relevant to like publish and when I come here, so I will import

52
00:04:22,690 --> 00:04:27,460
retail and after this publish, I will copy this.

53
00:04:36,070 --> 00:04:37,180
And I just see it.

54
00:04:39,000 --> 00:04:41,700
Now, when I go to the browser.

55
00:04:43,130 --> 00:04:47,710
So, OK, it will show up because we have not imported inside the apologies.

56
00:04:48,410 --> 00:04:49,490
OK, my bad.

57
00:04:49,490 --> 00:04:49,970
My bad.

58
00:04:51,130 --> 00:04:56,850
So it is true that first inside the apology is what will do is really important.

59
00:05:00,860 --> 00:05:06,950
The notes, I note, OK, auto important, that's a really good thing.

60
00:05:08,270 --> 00:05:11,670
Ahead, what we'll do is we'll write and.

61
00:05:13,570 --> 00:05:13,930
No.

62
00:05:17,130 --> 00:05:18,060
And we'll see it.

63
00:05:19,730 --> 00:05:22,730
Now, I should be rendered on our homepage.

64
00:05:25,780 --> 00:05:27,220
And it's loading.

65
00:05:27,550 --> 00:05:31,390
Basically, we see a text box.

66
00:05:32,660 --> 00:05:38,140
Whichever place holder and others like the limit to the terror characters and the populist button.

67
00:05:39,930 --> 00:05:43,080
You know, basically we will give some styling so that it looks forward.

68
00:05:44,960 --> 00:05:47,540
We'll will go here and.

69
00:05:49,150 --> 00:05:52,600
We'll provide some glasses to the this.

70
00:05:53,770 --> 00:06:01,580
And the very first class which will provide to this, it would be class name, and so this will give

71
00:06:01,630 --> 00:06:04,510
the note, you know what, Neal?

72
00:06:05,260 --> 00:06:08,490
And the other class is the note football.

73
00:06:09,990 --> 00:06:18,330
Basically, this after the text area, which is there, so that will be having the same name.

74
00:06:19,320 --> 00:06:19,830
Oh.

75
00:06:21,530 --> 00:06:23,850
No, but.

76
00:06:25,620 --> 00:06:26,370
I think that said.

77
00:06:31,140 --> 00:06:32,760
But the button also, we can give a glass.

78
00:06:33,780 --> 00:06:34,410
And.

79
00:06:36,350 --> 00:06:37,600
Last name.

80
00:06:38,330 --> 00:06:40,970
And that would be Steve.

81
00:06:43,550 --> 00:06:46,670
They wouldn't have the same trust, so that would be save.

82
00:06:48,300 --> 00:06:50,880
Now, let us go, and if these styling.

83
00:06:52,180 --> 00:06:53,530
Let me first say this.

84
00:06:55,570 --> 00:06:58,000
And now we will go to the next hour ceasefire.

85
00:06:59,150 --> 00:07:02,420
So so far, we have covered till this urgent focus now.

86
00:07:03,080 --> 00:07:06,200
We will go to the northern you.

87
00:07:06,530 --> 00:07:08,930
So that will be not.

88
00:07:12,000 --> 00:07:12,650
Thought new?

89
00:07:14,340 --> 00:07:14,730
New.

90
00:07:16,700 --> 00:07:19,670
And start of this, that it would be a background color.

91
00:07:21,520 --> 00:07:27,580
Background color would be this a hex code, basically that will be C the F.

92
00:07:29,320 --> 00:07:30,620
And to see a.

93
00:07:31,960 --> 00:07:32,920
I hope that's correct.

94
00:07:34,000 --> 00:07:41,650
OK, we'll save it, and now we'll style the tax study on learning for see if there is some changes.

95
00:07:42,700 --> 00:07:44,530
Yeah, we see this column right here.

96
00:07:44,980 --> 00:07:51,550
Obviously, we don't want it like this, but we'll style it in like coming to a consortium.

97
00:07:52,500 --> 00:07:53,430
So we'll do that.

98
00:07:53,670 --> 00:07:56,360
OK, so inside the no doubt new.

99
00:07:57,340 --> 00:08:01,190
We have done it now, we will do the tax studio next area.

100
00:08:03,060 --> 00:08:04,190
So we'll do the border.

101
00:08:06,200 --> 00:08:06,530
None.

102
00:08:10,430 --> 00:08:11,360
This is this.

103
00:08:12,290 --> 00:08:15,410
Do not they should not be providing that precise thing.

104
00:08:18,010 --> 00:08:21,040
We'll give our background color.

105
00:08:22,990 --> 00:08:28,680
And that will also be some c d f to the.

106
00:08:30,680 --> 00:08:34,520
We save it, and now we will go to see if that looks good.

107
00:08:35,210 --> 00:08:41,210
You can see there is no nobody saw this type of thing going on will say, Well, it's our plan.

108
00:08:41,210 --> 00:08:45,560
Also, there's no need for that in the next coming time.

109
00:08:46,580 --> 00:08:48,680
So let us know Australia for the.

110
00:08:51,110 --> 00:08:52,130
Next area.

111
00:08:52,490 --> 00:08:55,820
And now we should remove that outline.

112
00:08:57,970 --> 00:08:58,780
Next year.

113
00:09:00,790 --> 00:09:07,200
Focus and start of this will outline the outline is not yet.

114
00:09:08,560 --> 00:09:11,260
And now we will save this.

115
00:09:13,040 --> 00:09:15,380
All we go here and see.

116
00:09:16,190 --> 00:09:17,870
OK, look, there's no outline.

117
00:09:18,530 --> 00:09:21,650
We are typing it here, but there's no outline.

118
00:09:22,280 --> 00:09:23,390
OK, that's good.

119
00:09:23,600 --> 00:09:25,610
That's really nice.

120
00:09:27,690 --> 00:09:29,930
So now we will stand in all four.

121
00:09:33,900 --> 00:09:41,970
So after the text, focus will give the North Focus a sorry not for today nor.

122
00:09:43,440 --> 00:09:48,420
Hooters and the Note four post that will be on display Flex.

123
00:09:50,440 --> 00:09:56,320
Flex and after that, there would be a line items to be sent to.

124
00:09:57,990 --> 00:10:00,000
Line items to the center.

125
00:10:00,590 --> 00:10:05,700
I save it and I come here to see what are the changes.

126
00:10:06,870 --> 00:10:09,420
That is not so much what will make.

127
00:10:10,510 --> 00:10:20,320
So after the ride, Sandra will justify the content to be space between justify content, space between,

128
00:10:21,220 --> 00:10:23,250
OK, we'll save it and all.

129
00:10:23,260 --> 00:10:30,820
If I see there are some changes or not that are because this publish button has moved to this, and

130
00:10:31,570 --> 00:10:35,230
that is a little bit of things happening here.

131
00:10:35,800 --> 00:10:37,120
So that is it.

132
00:10:38,260 --> 00:10:43,420
You might be wondering why it's not looking like a card that will do in the note list, and we are rendering

133
00:10:43,420 --> 00:10:47,230
all of the notes inside one page, so that thing will be done there.

134
00:10:48,960 --> 00:10:54,150
The note footer is done, and now basically we can style the note.

135
00:10:55,200 --> 00:10:55,770
And.

136
00:10:56,990 --> 00:10:57,680
We'll do that.

137
00:10:57,820 --> 00:10:58,100
No.

138
00:10:59,420 --> 00:11:00,740
Inside of here.

139
00:11:03,020 --> 00:11:11,710
So I think the concert for the North now will install the north component that we will render the North.

140
00:11:12,520 --> 00:11:17,980
This will just we're adding now when we add, and that will be showing up on the screen in the UI.

141
00:11:17,990 --> 00:11:23,750
So how that will look, so that will for that will create another component that is the notorious.

142
00:11:24,230 --> 00:11:31,250
So inside of that, no doubt, yes, we'll be creating that, that guard, which would be showing the

143
00:11:31,250 --> 00:11:34,730
like our review date.

144
00:11:34,970 --> 00:11:38,600
And it will also have a button to delete and all of that.

145
00:11:38,750 --> 00:11:40,250
So that will do in the next review.