1
00:00:00,150 --> 00:00:05,450
All right, and we already know the drill, we navigate back to our we're looking for the slider.

2
00:00:05,760 --> 00:00:07,780
I'll open up my integrated terminal.

3
00:00:07,800 --> 00:00:10,260
I'll make sure that I'm on the road.

4
00:00:10,560 --> 00:00:15,290
And once I'm here, I just go with KDDI and then set up for my Schlyter.

5
00:00:15,580 --> 00:00:16,350
There it is.

6
00:00:16,350 --> 00:00:20,730
Once I'm here, I'm going to go with NPM Install online.

7
00:00:20,730 --> 00:00:21,420
Right away.

8
00:00:21,430 --> 00:00:24,060
We can run and be stuck.

9
00:00:24,360 --> 00:00:28,470
And while we're getting all our dependencies as far as our project.

10
00:00:29,300 --> 00:00:37,010
In the sauce, you'll have the data, so we have a list of people that are going to be displayed in

11
00:00:37,010 --> 00:00:40,590
our Schlyter course, we have success in this project.

12
00:00:40,610 --> 00:00:42,760
We'll also use react accounts.

13
00:00:42,800 --> 00:00:47,180
Of course, they already installed as a dependency and our package.

14
00:00:47,180 --> 00:00:54,860
Jessan and two more things that I would like to mention in a read me EOC project in action.

15
00:00:55,410 --> 00:01:02,430
So let me navigate right now to the URL and you'll see that that is one more Gadsby project.

16
00:01:02,750 --> 00:01:12,380
Now, this is Gadsby course specific where we work with editable or if we navigate to a homepage, you'll

17
00:01:12,380 --> 00:01:15,410
notice a reviews app as well.

18
00:01:15,770 --> 00:01:20,930
So, again, a little bit of different setup because we are getting data from the table.

19
00:01:21,200 --> 00:01:24,940
But the idea is exactly the same where we have the slider.

20
00:01:25,160 --> 00:01:32,660
And I also would like to mention that in this project, as far as the app component, I purposely jammed

21
00:01:32,660 --> 00:01:34,400
all the functionality in there.

22
00:01:34,760 --> 00:01:37,760
So you'll notice that we have only one component.

23
00:01:37,760 --> 00:01:41,360
And I can tell you right away that it is going to get quite big.

24
00:01:41,810 --> 00:01:50,150
Now, my reasons for that waterfall were first I would want you to get comfortable with working and

25
00:01:50,150 --> 00:01:58,010
bigger components because it's not always going to be the case where everything is nice and cute and

26
00:01:58,010 --> 00:02:04,490
everything is separated into separate components as your projects get bigger or as you start working

27
00:02:04,490 --> 00:02:12,770
on projects created by other people, you might run into situations where, yes, your component files

28
00:02:12,800 --> 00:02:19,080
will get quite big and you have to be comfortable navigating around that file.

29
00:02:19,370 --> 00:02:24,490
It's not like you can just ask for a different file where the component will be smaller.

30
00:02:24,770 --> 00:02:25,700
That's number one.

31
00:02:25,940 --> 00:02:29,120
And the second reason is because I have a challenge for you.

32
00:02:29,570 --> 00:02:39,680
Once you're done with a project, I would want you to decide how you would separate into single components.

33
00:02:40,040 --> 00:02:42,260
So our app component will be quite big.

34
00:02:43,040 --> 00:02:49,250
And then I would want you to take a look at the file and be like, you know, I'll move my buttons to

35
00:02:49,250 --> 00:02:54,380
a separate component and then, of course, set up the functionality where you pass in the props or

36
00:02:54,380 --> 00:02:56,980
you would want to move something else into a separate component.

37
00:02:57,470 --> 00:03:03,890
And I'm not going to tell you which parts you need to place it in separate components, because that

38
00:03:03,890 --> 00:03:04,760
is up to you.

39
00:03:05,120 --> 00:03:10,460
But I think it would be a great challenge for you where you can take a look at the file and you can

40
00:03:10,460 --> 00:03:17,780
decide, hey, listen, maybe it makes more sense if this particular piece of component is in its own

41
00:03:17,780 --> 00:03:18,320
component.

42
00:03:18,770 --> 00:03:25,400
Again, I would suggest doing that at the very end of the project because that way you can avoid some

43
00:03:25,550 --> 00:03:26,840
unnecessary bugs.

44
00:03:27,170 --> 00:03:32,510
And with all that said, I would want to work in my slider component.

45
00:03:32,510 --> 00:03:37,750
And at the moment, the only thing you should see is the slider project set up.

46
00:03:38,180 --> 00:03:44,480
And as always, I'm just going to start with mindstate values where there's going to be a value for

47
00:03:44,480 --> 00:03:48,380
my list and I'll name these people and then set people.

48
00:03:48,560 --> 00:03:50,750
And that is equal to a year's state.

49
00:03:50,750 --> 00:03:51,350
Of course not.

50
00:03:51,350 --> 00:03:56,560
Use a factory, use state and then I'll pass in the data.

51
00:03:56,780 --> 00:04:03,920
So the era that is coming from my data address, again, in that address, we just have the array of

52
00:04:03,920 --> 00:04:04,340
people.

53
00:04:04,510 --> 00:04:09,530
Each person is represented by the object and we have the properties, we have the images, name title

54
00:04:09,530 --> 00:04:11,940
quotes and all that good stuff.

55
00:04:12,170 --> 00:04:16,480
So in here we just pass in the data once that is out of the way.

56
00:04:16,880 --> 00:04:24,980
I also want to set up the index because in order to set up that slider, there will be an index that,

57
00:04:24,980 --> 00:04:28,550
of course, will change as we click on a button.

58
00:04:28,940 --> 00:04:34,940
OK, so we're going to go here with CONSED and then index and then set index.

59
00:04:34,940 --> 00:04:36,740
And that is equal to a user state.

60
00:04:37,610 --> 00:04:40,760
Again, initial value will be zero.

61
00:04:41,210 --> 00:04:47,510
Then there's going to be some use effect where of course we're going to have our functionality and right

62
00:04:47,510 --> 00:04:54,680
after our user fact, the ones that we currently don't have, we are going to have our return now.

63
00:04:54,680 --> 00:04:58,720
We'll start with the very, very basics where there's going to be initial setup.

64
00:04:58,970 --> 00:05:05,570
Now, there's purposely some success commented out in access so we can go over step by step.

65
00:05:05,720 --> 00:05:12,470
And then once we understand the success, then, of course, we're going to add functionality in our

66
00:05:12,470 --> 00:05:13,530
return as well.

67
00:05:13,550 --> 00:05:17,960
So for the time being, let's just go with the return on here.

68
00:05:17,960 --> 00:05:21,380
I would want to have a section, a lot of class name here.

69
00:05:22,900 --> 00:05:28,130
And that class name will be S. Let me go with the title here.

70
00:05:28,810 --> 00:05:32,970
And by the way, this would be a perfect example for separate component.

71
00:05:33,280 --> 00:05:37,720
So I'm already suggesting something that I would move into a separate component, and that is the title.

72
00:05:38,020 --> 00:05:39,810
But again, it is up to you.

73
00:05:40,300 --> 00:05:41,680
Just a friendly suggestion.

74
00:05:41,980 --> 00:05:48,690
And I have a spine Vanport slash and then I'm looking for the name, which is going to be reversed.

75
00:05:49,030 --> 00:05:55,870
So once we set it up there is we have our title and then we're going to have a section center.

76
00:05:56,230 --> 00:06:02,380
So right next to the div I'm going to go with another one and I'm going to call this section center.

77
00:06:02,710 --> 00:06:06,160
And inside here I would want to iterate over my list.

78
00:06:06,550 --> 00:06:14,470
So the data that is coming from my data just so essentially miring and for the time being, we'll just

79
00:06:14,470 --> 00:06:14,950
iterate.

80
00:06:15,220 --> 00:06:20,020
And again, there's going to be some cases that eventually will add dynamically.

81
00:06:20,290 --> 00:06:25,450
But first, I would want to get that list and then I would want to display at least something on the

82
00:06:25,450 --> 00:06:25,870
screen.

83
00:06:26,050 --> 00:06:27,790
So we're going to go with people map.

84
00:06:28,180 --> 00:06:32,250
So we're iterating over my people already online.

85
00:06:32,260 --> 00:06:33,700
I would want access to things.

86
00:06:34,150 --> 00:06:36,430
I'll call the object person.

87
00:06:36,880 --> 00:06:42,640
And then also I'd want to have a person index which is coming with my method.

88
00:06:43,150 --> 00:06:48,400
And then of course, I would want the structure properties from the person gyne.

89
00:06:48,400 --> 00:06:51,660
If you want to double check the properties, just navigate to that address.

90
00:06:51,670 --> 00:06:58,930
In my case, I already know that I'm looking for any looking for image, name and then title as well

91
00:06:58,930 --> 00:07:02,690
as the quote that is equal to my person.

92
00:07:03,190 --> 00:07:07,010
Now, as far as your turn, yes, there's going to be more functionality.

93
00:07:07,020 --> 00:07:13,000
You'll hear more more stuff coming up, more here.

94
00:07:13,510 --> 00:07:20,710
But for now, I would want to go with our turn and then we're going to go with article like so and we

95
00:07:20,710 --> 00:07:22,240
might as well add a key here.

96
00:07:22,240 --> 00:07:26,020
So I'm going to go with key is equal to my party.

97
00:07:26,410 --> 00:07:30,600
And instead of this article, I would want to go with IMG.

98
00:07:31,000 --> 00:07:36,700
Now, that, of course, will be equal to the property that I've structured in my case.

99
00:07:36,730 --> 00:07:39,850
Here's an image than for the alternative.

100
00:07:40,270 --> 00:07:45,190
I'm going to go with name and we should see a massive image on the screen.

101
00:07:45,580 --> 00:07:54,640
So the problem here is that I did not add person IMG class once we do that and of course our image is

102
00:07:54,640 --> 00:08:02,920
more beautiful, so at least we have something on screen and then right next to the image when I guess

103
00:08:02,920 --> 00:08:07,240
right after the image, I'm going to go with Nimir here.

104
00:08:07,760 --> 00:08:14,560
I want to say that inside of the hearing for I would want to display the name and on what is happening

105
00:08:14,560 --> 00:08:17,320
right now, we have a bunch of names.

106
00:08:17,800 --> 00:08:24,400
And the reason is because with this, we are at the moment placing them one on top of other.

107
00:08:24,640 --> 00:08:27,640
And that is something that we're going to cover in the next video.

108
00:08:27,850 --> 00:08:28,810
So don't freak out.

109
00:08:29,030 --> 00:08:36,100
That is on purpose because I have commented out some success just because I would want you to understand

110
00:08:36,280 --> 00:08:37,390
the general idea.

111
00:08:37,720 --> 00:08:41,620
Just keep on writing the return with me and you'll understand everything.

112
00:08:41,620 --> 00:08:42,240
And a second.

113
00:08:42,610 --> 00:08:48,490
So in here where we have the paragraph, I'm going to go with class name and that will be equal to my

114
00:08:48,490 --> 00:08:50,000
title like.

115
00:08:50,110 --> 00:08:56,620
So, um, inside of the paragraph I will look for my title properly, of course.

116
00:08:57,250 --> 00:09:00,700
And then what else I would want is of course the quote.

117
00:09:01,550 --> 00:09:07,880
So let's go here with another paragraph in this case, the class will be taxed and we're looking for

118
00:09:07,880 --> 00:09:10,580
the, quote, property instead.

119
00:09:11,000 --> 00:09:19,700
Now, lastly, let's add that massive icon and the name is, quote, right out of class name here as

120
00:09:19,700 --> 00:09:20,000
well.

121
00:09:20,300 --> 00:09:27,170
And it's going to be an icon and then still within a section center, but not inside of the article

122
00:09:27,500 --> 00:09:30,170
or the iteration over the people.

123
00:09:30,500 --> 00:09:34,880
I would want to set up my buttons and it's not going to be a container.

124
00:09:34,890 --> 00:09:39,650
There's just going to be two buttons, one for Priv and one for next.

125
00:09:39,950 --> 00:09:42,780
I'm going to go with button on a class name.

126
00:09:43,130 --> 00:09:48,800
So for the first one is going to be priv and eventually there will be unclick.

127
00:09:48,950 --> 00:09:50,210
Not for now.

128
00:09:50,510 --> 00:09:53,260
And we're just going to go with the icon name.

129
00:09:53,720 --> 00:09:56,270
We're here and it should end with left.

130
00:09:57,120 --> 00:10:03,120
So that is, of course, her button and now would want to copy and paste and there's going to be a next

131
00:10:03,120 --> 00:10:07,230
button as well, so class name will be next.

132
00:10:07,410 --> 00:10:10,420
Now, I also want to change the icon that have left.

133
00:10:10,440 --> 00:10:12,110
It is going to be all right.

134
00:10:12,570 --> 00:10:15,770
So once we save, this is what we should see.

135
00:10:16,110 --> 00:10:22,170
Now, like I already previously mentioned, because of the success, we have this jibberish look, because

136
00:10:22,170 --> 00:10:26,470
we are placing one item on top of the other one.

137
00:10:26,840 --> 00:10:29,070
OK, so we have first try the next one.

138
00:10:29,070 --> 00:10:29,490
Next one.

139
00:10:29,490 --> 00:10:29,940
Next one.

140
00:10:30,240 --> 00:10:32,510
But we can technically see only one.

141
00:10:32,940 --> 00:10:36,190
And the reason for that is because of the success.

142
00:10:36,540 --> 00:10:43,680
And I did that because in the next video, we are going to cover step by step what success we would

143
00:10:43,680 --> 00:10:45,300
need to add in first place.

144
00:10:45,540 --> 00:10:51,710
And only then we're going to take a look at how we can do that dynamically using the Riak.