1 00:00:00,790 --> 00:00:02,160 All right my friends we finally did it. 2 00:00:02,180 --> 00:00:04,320 We finished up this image application. 3 00:00:04,460 --> 00:00:08,060 Now it took a pretty good amount of time but I think you'll agree with me that we learned a lot about 4 00:00:08,060 --> 00:00:09,620 react in this video. 5 00:00:09,620 --> 00:00:13,760 I want to do a quick overview on some of the big things that we covered and that we'll go to a couple 6 00:00:13,760 --> 00:00:18,470 exercises in the next section so we're going to first start off with the first component we put together 7 00:00:18,530 --> 00:00:20,570 these search bar inside of here. 8 00:00:20,570 --> 00:00:24,470 We learn more about event handlers remember with an event handler. 9 00:00:24,470 --> 00:00:31,340 We will take say a and put tag or a foreign tag we will pass in a callback function to a very specifically 10 00:00:31,400 --> 00:00:38,370 named Propp then whenever that tag or that element emits that event our callback function will be called. 11 00:00:38,750 --> 00:00:44,540 One huge issue that we ran into ran this callback functions was the value of this inside them. 12 00:00:44,540 --> 00:00:49,460 And as you saw by one the later years we ran into inside the app component This is an issue that is 13 00:00:49,490 --> 00:00:50,430 not going to go away. 14 00:00:50,450 --> 00:00:55,490 It's something that you always have to be aware of because it's going to rear its ugly head so to speak 15 00:00:55,550 --> 00:00:58,400 on just about every project you work on. 16 00:00:58,400 --> 00:01:04,980 Remember in general the rule to keep in mind anytime you have a callback function just to be safe. 17 00:01:05,030 --> 00:01:11,210 You can use this arrow syntax like that like so or the arrow function syntax that's going to automatically 18 00:01:11,270 --> 00:01:17,210 bind this function and make sure that it always has the appropriate value of this inside of its. 19 00:01:17,310 --> 00:01:21,990 The next thing that we covered with our search bar component was that with the Propp system we only 20 00:01:21,990 --> 00:01:27,600 communicate from a parent down to a child that eventually end up being an issue because we wanted to 21 00:01:27,810 --> 00:01:33,600 communicate the search term from the search bar up to the parent function or the parent component the 22 00:01:33,770 --> 00:01:35,090 component in this case. 23 00:01:35,280 --> 00:01:41,120 So in order to communicate from a child to a parent we pass a callback from the parent to the child 24 00:01:41,730 --> 00:01:46,800 and then the child will call that callback identical system to what we are doing with these event handlers 25 00:01:46,800 --> 00:01:49,380 down here. 26 00:01:49,380 --> 00:01:49,630 All right. 27 00:01:49,630 --> 00:01:54,930 So the next day we ran into was inside of our image list database file. 28 00:01:54,960 --> 00:01:58,980 We learned a little bit more about how to render images or some render lists. 29 00:01:59,220 --> 00:02:03,210 So the key thing to keep in mind here is the map function from javascript. 30 00:02:03,210 --> 00:02:08,080 Every time you want to render a list you're probably going to be reaching for that map function. 31 00:02:08,160 --> 00:02:12,440 Anytime we make a list we always have to define maybe not have to. 32 00:02:12,540 --> 00:02:18,540 But highly highly recommend it to define a key on the root element that we are rendering into that list 33 00:02:19,080 --> 00:02:19,580 in general. 34 00:02:19,590 --> 00:02:26,620 We want to use a key that has a value that is consistent and unchanging for each record between renderers. 35 00:02:26,700 --> 00:02:31,500 And so if you're ever working with data that has an IP property you're almost always going to use the 36 00:02:31,500 --> 00:02:35,510 ID of each record as the key property. 37 00:02:35,580 --> 00:02:38,710 Then the last thing we spoke about was inside the image card. 38 00:02:38,970 --> 00:02:42,610 We got a pretty good introduction to the ref system. 39 00:02:42,610 --> 00:02:47,760 Remember anytime that we want to reach into the DOM and interact with some individual element we're 40 00:02:47,760 --> 00:02:53,450 going to create a raft inside the constructor and then we will wire it up to an individual element by 41 00:02:53,460 --> 00:03:01,080 passing it as a rough property then later on we can access that ref and get a handle on the actual Dom 42 00:03:01,080 --> 00:03:03,060 node as quick reminder. 43 00:03:03,060 --> 00:03:05,700 Can't say it enough Remember these are GSX tags right here. 44 00:03:05,700 --> 00:03:11,570 This is not T.M. so we can't just somehow maintain a reference to this GSX element. 45 00:03:11,730 --> 00:03:17,420 We have to make use of the ref system if we ever want to interact with the actual Dom element. 46 00:03:17,420 --> 00:03:23,370 And then finally we learned a little bit about the grid CSSA system now so you understand the grid CSSA 47 00:03:23,370 --> 00:03:23,930 system. 48 00:03:24,060 --> 00:03:28,180 Totally not a requirement whatsoever Britz the SS is extremely new. 49 00:03:28,200 --> 00:03:29,620 Still undergoing changes. 50 00:03:29,700 --> 00:03:34,920 So we didn't really do a deep dive on it because it's just not super important to have a super solid 51 00:03:34,920 --> 00:03:36,380 grasp on it just yet. 52 00:03:36,600 --> 00:03:40,920 Introducing the grid system was just kind of more of a little bit of an excuse so we could figure out 53 00:03:40,920 --> 00:03:46,170 how to use this ref stuff and figure out how to reach into the DOM and get the image height and whatnot. 54 00:03:46,450 --> 00:03:46,700 OK. 55 00:03:46,710 --> 00:03:48,410 So I hope you enjoyed this application. 56 00:03:48,420 --> 00:03:50,810 We still have a ton more stuff to work on. 57 00:03:50,820 --> 00:03:54,210 So let's take a quick pause right here and we'll continue in the next section.