Welcome to this video.
So until the last video, we saw how to run the hard coated part of the movies like I Give You Movies.
In abductors have given a set of four movies, hardcore, and these movies are basically we are printing
them on the screen.
So now in this video, we can see how to dynamically bring the movies like get the movies from the or
IMDb API that we saw in the previous videos, and then implement the surge feature so that the user
will have a surge barrier.
The title, which they search.
Yet you will get to able to see the movies that are that are present with that title.
See how to implement that.
The first thing we have to have a title as a movies over here and then a search box, we will create
those components.
One is search box component and another one is Mobil, extending the insect component and creating those
two components.
One is more A-list heading.
A jazz sex.
And the other one is.
Search box lodges.
Birchbox.
So much start getting six.
So now we're the country and the concert is turning.
So it will take some props and props to be using the arrow function.
So these games you have this, you can create a function called more interesting and then use everything
but simply as an arrow function to decrease the amount of code.
Mescal will return.
I do.
With platinum coal.
Column.
This will contain natural.
It drops that hitting.
So they have created a separate component for the list here is that we'll have two different beheadings.
That one is the movies heading the movies that appear from the search, but another is the favorite
had changed of writing two different ones that we can create a component and said, send the props and
that it is movies, our favorites.
You can check it.
Not if you can.
If you want to already watch it, want to watch your watch list.
So to have these components, you can simply use the single component by changing your prop.
Whenever you send the prop troop from abroad that you can just send it in the way you want, like one
time I can send.
Movies heading another day, my kids and favorites are I can send my my list are already watched like
that.
So we have to export this.
So now we are done with the movie, Liz Cheney and I will create such search box.
Regarding the search box function to export it well, it will also take drops on our battle function.
Well, we have written something and we'll read it, I mean, I do.
The class name.
So if you remember, these are the last names that I'm taking from bootstrap, assembling small in the
forward means the site it should occupy in that homepage.
So you can have input.
Input with some props.
So we have a last name.
As farm control.
So the value will be brought to value.
On change.
So, you know, unless Yankees valiant on change when we write the code for the search box and AB dodges
shortly, we'll do that shortly.
So even.
Drops duck.
So that such value as even not.
A.
The.
And then.
Soledad will be Typekit such.
So now you may have doubts like why we are writing the value as sending the project value to the value
and then performing now on chain function.
So now go to abduct Jess.
Here so since, like we used a constant for movies like an hour, I'll be removing this hot water part.
It will be an empty RFU refresh, it will get an empty.
Thank you.
So we are not getting anything because a remote default is so similar to movies will be creating a hook
for such money, so there'll be such a value, the value that the user is typing into the search bar.
And to change that value will call a function called sex triangle.
I.
So initially, it will be R and B, because the user will not type anything initially whenever you read
anything with the help of such search value function will change asset search value constant.
So after this, now we have to create a search box component, right?
So that I'll be doing it.
So about the movies list, and we have another revision about this rule.
So he had inside the container, flew fluid, will have a division with glass.
A division.
Glass animals now will be calling the Bootstrap Plaza Store Day Flex Fuel.
A few are bootstrapped lives and a few other custom classes that we'll see shortly.
I line items.
Senator.
And B minus four and B minus the Bush, our plans for our alignment and everything.
So once this is done, we'll call the movie listed in component.
We'll be illustrating.
We have to send some props late, say, to the heading.
We have this heading heading will be moist since we are only one to like, display the movies that are
searched by the user, not the favorites of which he had it into his favorite.
So you can see I have seen that.
I've said there had been signs at the woman was initiating and catching this props and said the production
at Edinburgh.
So that is how I can tell that.
So if you want the same thing, like if you want to have a favorite heading, then you have to send
the movie with favorites as the extorting replacing the movies.
So that is how simple like we work with components.
So long as it is done, then we need to have a search box.
It will also off, you know.
Props.
Such value will be.
Such value.
Said such rally will be.
It's such value.
So basically, we're sending a functional audit.
So, but such value props, you are sending that search value.
So as you can see in the search box at our desks inside the value, we are losing the value that we
got from the props.
That value is nothing but simply a search value constant that we are using it.
And similarly, if I said search relative, you are sending the same cellular function.
So this is usually said the value of search value.
So lock Minneapolis on change whenever the search button input changes.
It will take that event and then it will use the search value function and change the value of the constant.
Don't even dare to conduct value that is the current value present internet search box.
So this is what basically we are doing in our projects.
So once we are done with that now, you can go to our proxies and basically use some styling.
Now I'll be doing some styling part like we are using bootstrap for majority of the styling, but also
there will be some changes that we want rather than bootstrap like some customized changes so that we
are going to adapt or see.
The background color will be.
Hashtag one four one four four one four one four one four.
So you can choose or like it's not.
And I said that you have people only these colors you can go to color, you wear that other color palette
that are produced by different developers, the white and the realtime web development field.
So you can use your favorite color palette, you can see the exact copy.
It is color hunt, dot, you know, website name you can check out.
So basically, this is what I am using to for painting purpose, organize any colors off represent.
You can change the styling the way you want to look your website.
And then.
Talk movie app.
But all inside, well, we have all the rules should have a overflew access order.
Alex FRAP should be no.
You know what?
Not image container.
Position should be relayed to.
Transition should be transformed, which is basically that never to be over, but under the immediate
it should like it should zoom a bit like, so we have to know on which we are already.
So for we should have a transition on the image.
Content at Transform should be zero point two x outside the cold front holding in our by.
No image content and what?
So Hobart is a sort of class that we have to use column and check water for our classes and then be
in documentation.
If you want.
I'll be attending Castle 2.0.
And then transforming risk.
We are increasing the scale of bit whenever the a person user hovers on to an image or to a movie and.
Skin should be one point.
It increases by point one.
So once this is done, they are to be watched as well.
Do.
So we are not going to be a doctor using this intended audience, we're not calling this search box,
so we'll call that.
It can both.
Search box.
From.
Not large components.
Flash.
Such was.
Does not contract before next week and said the surge box oxygen before about to explode.
Export.
Default.
Such books, so I think it should work, yeah.
So now we can see, like we have completed 19 implementation of title and such, but very few scenes
at the branches instead of sending movies, value added.
Yeah, instead of war, which I've been envisioning favorites.
We're going to initiate new favorites like it is, the whole beard is not refreshing, it is only changing
the component that we are changing.
So that is the beauty of the act.
It works with confidence.
Rather than refreshing the whole page, it will only refresh the components that are changing.
So this allows for the like, the time it will time complexity and the space complexity.
So that is how it works.
React.
So that's where it is most popular framework in the technology.
So they want movies and objects reusable, like the kind of the same component for using various things,
and then once we are going to the favorites section, then we can use the same component instead of
sending movies, Wilkinson had the musical to favorites.
So if you have a search or really can search, but how to like based on the search value, how to render
the images like how to search the movies to that movies, that data we are getting from that the right
step where you are in that search feature so that the dynamic, the dynamic combination of what we see
in the next few.