All right my friends we finally did it.
We finished up this image application.
Now it took a pretty good amount of time but I think you'll agree with me that we learned a lot about
react in this video.
I want to do a quick overview on some of the big things that we covered and that we'll go to a couple
exercises in the next section so we're going to first start off with the first component we put together
these search bar inside of here.
We learn more about event handlers remember with an event handler.
We will take say a and put tag or a foreign tag we will pass in a callback function to a very specifically
named Propp then whenever that tag or that element emits that event our callback function will be called.
One huge issue that we ran into ran this callback functions was the value of this inside them.
And as you saw by one the later years we ran into inside the app component This is an issue that is
not going to go away.
It's something that you always have to be aware of because it's going to rear its ugly head so to speak
on just about every project you work on.
Remember in general the rule to keep in mind anytime you have a callback function just to be safe.
You can use this arrow syntax like that like so or the arrow function syntax that's going to automatically
bind this function and make sure that it always has the appropriate value of this inside of its.
The next thing that we covered with our search bar component was that with the Propp system we only
communicate from a parent down to a child that eventually end up being an issue because we wanted to
communicate the search term from the search bar up to the parent function or the parent component the
component in this case.
So in order to communicate from a child to a parent we pass a callback from the parent to the child
and then the child will call that callback identical system to what we are doing with these event handlers
down here.
All right.
So the next day we ran into was inside of our image list database file.
We learned a little bit more about how to render images or some render lists.
So the key thing to keep in mind here is the map function from javascript.
Every time you want to render a list you're probably going to be reaching for that map function.
Anytime we make a list we always have to define maybe not have to.
But highly highly recommend it to define a key on the root element that we are rendering into that list
in general.
We want to use a key that has a value that is consistent and unchanging for each record between renderers.
And so if you're ever working with data that has an IP property you're almost always going to use the
ID of each record as the key property.
Then the last thing we spoke about was inside the image card.
We got a pretty good introduction to the ref system.
Remember anytime that we want to reach into the DOM and interact with some individual element we're
going to create a raft inside the constructor and then we will wire it up to an individual element by
passing it as a rough property then later on we can access that ref and get a handle on the actual Dom
node as quick reminder.
Can't say it enough Remember these are GSX tags right here.
This is not T.M. so we can't just somehow maintain a reference to this GSX element.
We have to make use of the ref system if we ever want to interact with the actual Dom element.
And then finally we learned a little bit about the grid CSSA system now so you understand the grid CSSA
system.
Totally not a requirement whatsoever Britz the SS is extremely new.
Still undergoing changes.
So we didn't really do a deep dive on it because it's just not super important to have a super solid
grasp on it just yet.
Introducing the grid system was just kind of more of a little bit of an excuse so we could figure out
how to use this ref stuff and figure out how to reach into the DOM and get the image height and whatnot.
OK.
So I hope you enjoyed this application.
We still have a ton more stuff to work on.
So let's take a quick pause right here and we'll continue in the next section.