1
00:00:00,570 --> 00:00:03,330
OK, so next, we'll be creating the naughty list component.

2
00:00:03,390 --> 00:00:08,580
Now, what did the Nautilus component not list component is responsible for rendering all of the both

3
00:00:09,240 --> 00:00:14,250
the reviews or those reviews will be grabbed from the desk?

4
00:00:14,550 --> 00:00:20,820
Or just basically the user will write the review, insert a note that I'm not really passing it to the

5
00:00:20,820 --> 00:00:29,850
notorious and that would be getting inside the North Note list, so there would be a list of reviews.

6
00:00:30,480 --> 00:00:32,670
So that is what the note list will do.

7
00:00:32,670 --> 00:00:33,840
Other review list will do.

8
00:00:33,840 --> 00:00:35,190
We can call it anything.

9
00:00:35,190 --> 00:00:40,260
But as of now we are going with note on this or we will not try to confuse anyone.

10
00:00:40,650 --> 00:00:42,870
So we'll just give the Nautilus to.

11
00:00:43,860 --> 00:00:45,930
Inside of a that would be the noblest.

12
00:00:49,160 --> 00:01:01,430
Not least on this and here, really important boilerplate code, so that would be odd IFC and then out

13
00:01:01,430 --> 00:01:01,850
of this.

14
00:01:02,300 --> 00:01:03,750
What we'll do is.

15
00:01:05,250 --> 00:01:07,770
He'll create the basic structure first.

16
00:01:08,220 --> 00:01:09,400
So inside this.

17
00:01:11,020 --> 00:01:11,380
If.

18
00:01:13,170 --> 00:01:21,120
What we'll do is we'll import in order to be an important import node from.

19
00:01:22,290 --> 00:01:24,840
That is the component.

20
00:01:25,680 --> 00:01:26,390
No, no, no, no.

21
00:01:27,330 --> 00:01:27,930
I'm not.

22
00:01:30,880 --> 00:01:34,360
No, 13-Year-Old, so you can, right, but that's not required.

23
00:01:35,850 --> 00:01:41,880
Like React is smart enough to know that if we're not writing gorgeous, you, you actually mean the

24
00:01:41,880 --> 00:01:42,210
same.

25
00:01:42,630 --> 00:01:43,080
OK?

26
00:01:43,590 --> 00:01:44,640
Don't worry about that.

27
00:01:46,320 --> 00:01:48,090
We will also call the ad not.

28
00:01:49,900 --> 00:01:56,320
Import or import and no from.

29
00:01:58,380 --> 00:01:58,920
I know.

30
00:01:59,220 --> 00:01:59,580
Yeah.

31
00:02:00,820 --> 00:02:09,390
Next, what we'll do is we will import them inside this death and we will map the by before mapping

32
00:02:09,390 --> 00:02:09,840
the data.

33
00:02:10,350 --> 00:02:12,690
Let me just write the basic structure.

34
00:02:13,270 --> 00:02:15,000
OK, we'll do that.

35
00:02:15,000 --> 00:02:22,080
Like my defense is always do the white first like design the structure and then give the styling and

36
00:02:22,080 --> 00:02:25,650
then give the functionality and then add the JavaScript.

37
00:02:26,010 --> 00:02:27,600
Like my principles, I like that.

38
00:02:28,290 --> 00:02:33,310
First, give the structure, then give styling by the thesis or whatever the icon you want to grab.

39
00:02:33,680 --> 00:02:37,230
Anything like that, then you get functionality to it using JavaScript.

40
00:02:37,710 --> 00:02:40,350
So that's like process, which I follow.

41
00:02:41,340 --> 00:02:44,790
So we got the note component.

42
00:02:44,800 --> 00:02:45,570
So not.

43
00:02:47,090 --> 00:02:49,940
Of course not with capitals, OK?

44
00:02:50,860 --> 00:03:01,120
On what we will sell closer to now, it will be expecting some crops like water with the promise of

45
00:03:01,120 --> 00:03:02,500
Eternal that those crops.

46
00:03:03,010 --> 00:03:07,900
So first of all, let me grab that inside this naughty list, so unintended intended naughty list will

47
00:03:07,900 --> 00:03:08,710
be heading north.

48
00:03:09,730 --> 00:03:11,170
We'll be having handlers not.

49
00:03:14,070 --> 00:03:16,890
And we'll also be having the delete not.

50
00:03:20,970 --> 00:03:21,330
OK.

51
00:03:22,260 --> 00:03:24,930
These are the only three things, basically.

52
00:03:25,020 --> 00:03:25,560
Nothing else.

53
00:03:26,430 --> 00:03:34,440
So inside the note, what we'll do is we'll give the I.D. and it will do is there will be no doubt,

54
00:03:34,680 --> 00:03:35,250
no doubt.

55
00:03:36,130 --> 00:03:37,050
Yeah, sounds good.

56
00:03:37,810 --> 00:03:40,960
And next, we'll be having the text backers.

57
00:03:42,180 --> 00:03:44,730
And that would be no dark text.

58
00:03:46,370 --> 00:03:46,820
Simple.

59
00:03:47,920 --> 00:03:48,510
Simple.

60
00:03:49,280 --> 00:03:50,440
We'll be having the date.

61
00:03:51,650 --> 00:03:53,210
They are not dead.

62
00:03:54,700 --> 00:03:56,770
That will be no doubt that worse.

63
00:03:58,630 --> 00:04:07,630
Yeah, and we will have the handle the the not so that will be also handled the lead note that will

64
00:04:07,630 --> 00:04:09,100
be equal to that on the same.

65
00:04:16,400 --> 00:04:17,440
And the not.

66
00:04:18,500 --> 00:04:19,550
I think this is it.

67
00:04:19,820 --> 00:04:28,610
Let me save it to get refactored after the note, we'll be having the worse because we wanted to split

68
00:04:28,750 --> 00:04:32,720
the right inside the literally we are going to display it, not anywhere else.

69
00:04:33,290 --> 00:04:35,780
So we'll throw in that also.

70
00:04:36,930 --> 00:04:38,910
Will that add?

71
00:04:40,830 --> 00:04:50,320
Node will sense it, and instead of here, it will be handle or not handle.

72
00:04:51,550 --> 00:04:51,790
And.

73
00:04:53,990 --> 00:04:55,340
And we say it.

74
00:04:57,890 --> 00:04:59,330
We just saved it.

75
00:05:00,110 --> 00:05:02,330
Oh, let me see if we can.

76
00:05:04,320 --> 00:05:08,850
Give some styling to it, because right now it would not be looking so good.

77
00:05:09,450 --> 00:05:11,940
So let us give a class, first of all.

78
00:05:12,480 --> 00:05:18,160
And after giving, the class will give the styling in the index talks the US.

79
00:05:18,160 --> 00:05:18,590
That's fine.

80
00:05:19,320 --> 00:05:20,370
Let me give a class.

81
00:05:25,490 --> 00:05:26,120
Last name.

82
00:05:28,770 --> 00:05:29,700
Would be not list.

83
00:05:33,070 --> 00:05:39,130
As simple as that, nothing complicated, the next we'll go to the next 48 hours to give.

84
00:05:39,520 --> 00:05:43,810
OK, I made a typo, but no time, no instead of not.

85
00:05:44,000 --> 00:05:45,190
OK, no problem.

86
00:05:45,190 --> 00:05:45,670
My bad?

87
00:05:46,210 --> 00:05:48,160
I save it list.

88
00:05:48,520 --> 00:05:51,160
Now we will go to the next CIUSSS.

89
00:05:52,890 --> 00:05:58,900
Inside the next 48 hours, we'll style the classes, which is then said the organizers basically only

90
00:05:58,900 --> 00:06:01,390
one class, and that's the note list.

91
00:06:02,440 --> 00:06:04,510
So nothing like different.

92
00:06:05,230 --> 00:06:08,890
So inside the index, Stasio says, I believe it's totally not me.

93
00:06:09,740 --> 00:06:11,380
OK, but let us give this statement.

94
00:06:12,380 --> 00:06:19,760
So the class name, which we had inside did not list one in all that is the only class name we need

95
00:06:19,760 --> 00:06:24,470
to customize, OK, so we'll copy that in order to avoid any typos.

96
00:06:26,120 --> 00:06:31,220
We bastard and then we will give the class names or the class properties sorry.

97
00:06:32,000 --> 00:06:37,340
So inside the notice, the very first thing which will do is will display the data in the grid form

98
00:06:37,970 --> 00:06:44,210
like we don't want it to go in the roll wise, column wise, we want it to be in the form of cards and

99
00:06:45,760 --> 00:06:46,880
in the form of groups.

100
00:06:47,240 --> 00:06:48,920
So will do display grid.

101
00:06:50,110 --> 00:07:00,700
Display grade and next will give the grade a gap like what should be the gap grade gap?

102
00:07:02,720 --> 00:07:04,700
There'd be one, Nadiem, I guess.

103
00:07:08,140 --> 00:07:14,860
We'll will also give the great template columns so great template column, you have to just typed the

104
00:07:14,860 --> 00:07:15,910
words of all words.

105
00:07:16,270 --> 00:07:18,280
After that you will get an audience edition.

106
00:07:18,280 --> 00:07:20,860
That's the work of the escort, I guess.

107
00:07:21,900 --> 00:07:24,180
And next, who will replace it?

108
00:07:24,600 --> 00:07:28,440
Naturally, the media's repeated and that will be autofill.

109
00:07:31,320 --> 00:07:32,010
Auto.

110
00:07:34,050 --> 00:07:34,500
Well.

111
00:07:35,820 --> 00:07:39,690
Com And that will be the minimum and maximum size.

112
00:07:40,170 --> 00:07:47,520
So minimax, we will call it not, we will not call it, it's called Minimax Internal Affairs that will

113
00:07:47,520 --> 00:07:48,870
be 250 pixels.

114
00:07:50,190 --> 00:07:51,870
And one for.

115
00:07:56,380 --> 00:08:00,160
We used that word for the excess, I guess, because only one glass is there.

116
00:08:00,730 --> 00:08:07,420
And we have styled it, and that too is enough as inside the next hour to as if I see, like this month

117
00:08:07,420 --> 00:08:09,590
is enough to make it look good.

118
00:08:09,610 --> 00:08:15,970
And right now, we can't see it because I have not yet imported inside the yes, and I won't do it now

119
00:08:16,000 --> 00:08:18,370
because I want to give some more functionality in Dallas.

120
00:08:19,390 --> 00:08:21,970
So let us go inside the no thought not list.

121
00:08:23,310 --> 00:08:31,800
And after coming here, we will do our really, really important step that is the notes we have to map

122
00:08:32,100 --> 00:08:32,760
the reviews.

123
00:08:33,240 --> 00:08:35,040
Before that we will use the map function.

124
00:08:35,580 --> 00:08:40,980
So after this trip, we will give and this is, of course, because we are using JavaScript.

125
00:08:41,510 --> 00:08:45,990
We will not will map the nodes or the reviews and all start map.

126
00:08:47,840 --> 00:08:49,930
Inside there, the function, there will be no.

127
00:08:51,140 --> 00:08:53,210
And this will be like this.

128
00:08:55,260 --> 00:08:55,610
Yeah.

129
00:08:56,870 --> 00:08:58,970
And will copy all of this not.

130
00:09:00,180 --> 00:09:01,200
Not copy will cut.

131
00:09:02,340 --> 00:09:08,330
I mean, you got it, and so there is and we'll save it, I guess there is no error, there should not

132
00:09:08,340 --> 00:09:09,000
be any us.

133
00:09:10,940 --> 00:09:15,230
Young after that will be having this are not so it is as simple as that.

134
00:09:15,810 --> 00:09:22,160
So basically what we did is we just map the data on mapping means what a like that is, our database

135
00:09:22,160 --> 00:09:28,880
or that is an array of object or there's an object, whatever, like there's a bunch of data mapping

136
00:09:28,880 --> 00:09:32,690
that particular array or object will what it will do.

137
00:09:32,690 --> 00:09:36,440
It will map through each and every element of the study.

138
00:09:36,960 --> 00:09:39,740
Let's say, for example, the first one.

139
00:09:39,740 --> 00:09:43,940
So that will be mapping the first one and that will be wherever you can.

140
00:09:43,940 --> 00:09:47,330
If you want to display, you can display the first one, the second one and so on.

141
00:09:47,330 --> 00:09:53,670
In the order one by one, it will display this one and then and then it will stop.

142
00:09:53,700 --> 00:09:58,460
No, it will be keep on displaying.

143
00:09:58,460 --> 00:10:04,130
It will be reading each and every single element inside the tree and it will be reporting it to like

144
00:10:04,130 --> 00:10:04,790
returning it.

145
00:10:05,180 --> 00:10:07,430
So that is the use of the map function.

146
00:10:07,790 --> 00:10:15,620
OK, so now what we'll do is we will move to the abductees file and we will start rendering everything

147
00:10:15,620 --> 00:10:17,320
and there in the after this.

148
00:10:17,990 --> 00:10:21,080
So that should be in the next video.