- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.500 --> 00:00:01.710
In this section of the course,
2
00:00:01.710 --> 00:00:04.320
we're gonna build out a really fun feature.
3
00:00:04.320 --> 00:00:07.010
We are gonna see how we can build out
4
00:00:07.010 --> 00:00:09.800
a full drag and drop interface
5
00:00:09.800 --> 00:00:12.190
for our portfolio items.
6
00:00:12.190 --> 00:00:13.930
So what that means is we're gonna be able
7
00:00:13.930 --> 00:00:15.380
to click on an item
8
00:00:15.380 --> 00:00:17.390
and then be able to drag that
9
00:00:17.390 --> 00:00:19.740
to a different spot in the layout
10
00:00:19.740 --> 00:00:22.510
and it's actually going to reorder
11
00:00:22.510 --> 00:00:24.820
where the items are laid out.
12
00:00:24.820 --> 00:00:27.920
And so this is gonna be a pretty complicated thing
13
00:00:27.920 --> 00:00:30.390
to build out, especially if you've never done it before.
14
00:00:30.390 --> 00:00:33.840
So we're going to really take it one step at a time.
15
00:00:33.840 --> 00:00:36.010
We're going to install a library
16
00:00:36.010 --> 00:00:38.670
that's going to help us build this out.
17
00:00:38.670 --> 00:00:40.440
Then you're gonna be able to see
18
00:00:40.440 --> 00:00:43.500
why we structured our portfolio items
19
00:00:43.500 --> 00:00:45.810
and our lists the way we did
20
00:00:45.810 --> 00:00:48.840
because we're gonna wrap up all that data
21
00:00:48.840 --> 00:00:50.640
and you're gonna see different ways
22
00:00:50.640 --> 00:00:53.987
that we can use the context in the provider API.
23
00:00:53.987 --> 00:00:56.700
And so we're gonna build all that out in this section.
24
00:00:56.700 --> 00:00:59.380
This whole section is gonna be dedicated
25
00:00:59.380 --> 00:01:02.570
for you to build out this drag and drop interface.
26
00:01:02.570 --> 00:01:06.320
And if you're curious on why I'm spending an entire section
27
00:01:06.320 --> 00:01:08.530
of the course just on this feature,
28
00:01:08.530 --> 00:01:09.870
there're a couple reasons.
29
00:01:09.870 --> 00:01:11.700
One is that it's a really fun
30
00:01:11.700 --> 00:01:13.770
and very cool feature to build out.
31
00:01:13.770 --> 00:01:17.120
But also, I found that building out this type
32
00:01:17.120 --> 00:01:19.510
of interface is a great way
33
00:01:19.510 --> 00:01:22.470
of combining all of your React knowledge.
34
00:01:22.470 --> 00:01:25.700
You're gonna have to understand component architecture.
35
00:01:25.700 --> 00:01:27.300
You're gonna have to understand props.
36
00:01:27.300 --> 00:01:30.850
You're gonna have to understand even a deeper way
37
00:01:30.850 --> 00:01:34.500
of understanding how your providers
38
00:01:34.500 --> 00:01:35.900
and your context API works.
39
00:01:35.900 --> 00:01:36.733
All of those things
40
00:01:36.733 --> 00:01:38.650
that you've learnt up 'til this point,
41
00:01:38.650 --> 00:01:41.460
you're gonna have to go and take that to a deeper level.
42
00:01:41.460 --> 00:01:42.910
So you're gonna reinforce your knowledge
43
00:01:42.910 --> 00:01:45.530
and you're gonna learn some more advanced concepts
44
00:01:45.530 --> 00:01:47.250
and along the way, you're gonna build out
45
00:01:47.250 --> 00:01:48.320
a pretty cool feature.
46
00:01:48.320 --> 00:01:52.120
So in this guide, I want you to go to this link,
47
00:01:52.120 --> 00:01:53.010
it's in the show notes
48
00:01:53.010 --> 00:01:55.700
for the react-sortable-hoc.
49
00:01:55.700 --> 00:01:57.160
And this is short,
50
00:01:57.160 --> 00:02:00.920
hoc is short for a higher order component.
51
00:02:00.920 --> 00:02:05.250
It is essentially just a different type of helper library.
52
00:02:05.250 --> 00:02:06.330
I don't want you to even worry
53
00:02:06.330 --> 00:02:08.050
about what that concept means.
54
00:02:08.050 --> 00:02:11.480
It's a pretty advanced term in the React community.
55
00:02:11.480 --> 00:02:14.140
Just think of it as a helper library.
56
00:02:14.140 --> 00:02:18.260
And we're gonna install this in this lesson.
57
00:02:18.260 --> 00:02:21.790
But then I want you to, before you go onto the next guide,
58
00:02:21.790 --> 00:02:24.020
I want you to go through the documentation,
59
00:02:24.020 --> 00:02:26.760
kinda like what you did with the styled components.
60
00:02:26.760 --> 00:02:27.900
I want you to go through it.
61
00:02:27.900 --> 00:02:29.650
I want you to look at their examples.
62
00:02:29.650 --> 00:02:31.760
Their examples are actually pretty cool.
63
00:02:31.760 --> 00:02:36.360
You can see how you can build out really beautiful types
64
00:02:36.360 --> 00:02:39.240
of interfaces that have drag and drop.
65
00:02:39.240 --> 00:02:41.900
You're gonna see that the grid example
66
00:02:41.900 --> 00:02:45.240
that they have here is gonna be very similar
67
00:02:45.240 --> 00:02:47.470
to what we're gonna be building out.
68
00:02:47.470 --> 00:02:49.840
And so definitely, look at their examples
69
00:02:49.840 --> 00:02:52.950
and then look at their source code
70
00:02:52.950 --> 00:02:55.820
and some of the different code examples
71
00:02:55.820 --> 00:02:58.290
and the implementations that they have here.
72
00:02:58.290 --> 00:03:01.590
What we're gonna be building is going to be pretty similar
73
00:03:01.590 --> 00:03:03.300
to this, except you're gonna see
74
00:03:03.300 --> 00:03:06.070
that we're gonna take it even up to another level
75
00:03:06.070 --> 00:03:09.260
where we use that provider and context API
76
00:03:09.260 --> 00:03:12.530
so we can manage all of our data properly.
77
00:03:12.530 --> 00:03:14.140
So in this guide,
78
00:03:14.140 --> 00:03:17.120
we're simply going to install that library.
79
00:03:17.120 --> 00:03:18.850
So you can copy this code
80
00:03:18.850 --> 00:03:23.220
or you could just type npm i react-sortable-hoc.
81
00:03:23.220 --> 00:03:26.370
It's up to you. They both run the same commands.
82
00:03:26.370 --> 00:03:31.370
And so we're gonna open up Visual Studio Code, and run this.
83
00:03:31.830 --> 00:03:34.000
It's gonna go install that library
84
00:03:34.000 --> 00:03:36.200
and then after that's done,
85
00:03:36.200 --> 00:03:37.930
assuming you don't have any errors with it,
86
00:03:37.930 --> 00:03:40.480
then in the next guide, we're gonna go
87
00:03:40.480 --> 00:03:43.943
and we're gonna start building out this implantation.