In this, we will continue with the project.
So now I'll be in the react my project directly.
And then you have to install Bootstrap, so we'll be using the bootstrap styling art project.
And BMI bootstrap.
So this will insult.
In the meantime, we'll see how to of the movies, like all the movie with the images on the on our
website, the first basically in the Dodgers, I'll be putting the React models.
In both.
Now I'll be putting the state books and amazing you didn't use affect up in this Aparajith survey,
importing them.
And then once the bootstrap is installed, we get me, for example, bootstrap.
This is the line to import bootstrap.
Bootstraps slash missed.
Slash census slash bootstrap, not many proxy.
So another good step is important successfully.
So now inside the tent, like inside a function app, I'll be using, the state took.
Concert movies said movies.
It was realistic.
So what this line of code does is that basically you lose, you skip it, and I could change the data
dynamically instead of page rather than loading up one page.
So when we use used state, the whole page does not render the component which uses this.
You state that the component which uses the movie's constant will be updating everything when this changes.
So basically, we had defining of constraint on movies, and we can change this for movies using the
function concept movies.
So this is the function to change this constant and then use it like we had it here.
Defining that embedding.
So basically the initial the initial value of movies will be embedded and then we can change that using
this at this function.
So now I'll put the array.
I'll give the impression as the movies list president of India.
Oh, let me select three movies, celebration, I guess so you.
And select them.
And then I thought.
So let me let's do the.
A concatenation, but because it looks a bit not that much of.
So everything is fine, it looks different.
So we have a given that we find value like we are basically hard putting it.
That is one.
You need to indentation and giving it a proper indentation so that it looks good enough to see.
So now they use the movies, contends that basically default for mortgage finished, and then we can
use this movies list to bring them on the screen.
So that instead of allowable, we want to get movies to be banking.
So hard to do that.
The as yet last name will be.
Since we are using Bootstrap, I'll be using we'll start classes for the styling containers.
It is a bootstrap class and then we have it'll be my custom style that will be giving inside approach
to.
Here.
Now I'll be having a little.
But always also a class name that comes from bootstrap, you can check the books documentation if you
have any doubts.
Last name is a cultural.
And then here I can get rid of the movies.
I like life, are you concerned?
You can create a new function for the movie list.
Like, there'll be a new component for relations in the movie, which has up from.
And they'll be sending them over as a prop for movies.
So now we are done with the code, we have to create this movie list bump, but it's a lot easier.
What we are doing is that we are sending this, this constant the date of the movies as a prop for the
movie list component.
So what are props?
Props are similar to attributes after before pitch female elements.
So basically, we know like if we use image element of and many will be adding source alternative or
a height like source attribute everything.
So similarly, since this is a custom component that we are creating, we call those actively just props.
So we have to be careful with the naming will be what name we use here.
We have to use the same name to catch the props when we create the movie list component.
So now I'll be creating a new folder components.
And in fact, component.
Oh, sorry, I created a file instead of pumping.
Certainly related.
We have to create a folder.
Complex inside this components for creating a new component movie list for display the movies.
Roger.
You can use data subjects, nothing matter, but if you enjoy jazz, you have to be there yet.
If you're a jazz sexy, it automatically decides like no need to import reactors, reactor and everything.
So once you're done with it, you have to let go.
Create a constant movie list function.
I'm using the arrow function in the props that we'll get from the approaches that we send us the movie's
constant.
And then what we have to render.
So there's going to be after an image of the image of the movie, right, so that the user can see what
movie it is.
So to render that?
So what we will be doing is.
We will be applying a map function on the movies that we got.
So what this will do is it will run through the array like a far look.
The map function is like us in the fall.
It will run through the movies at it and then we can search the date of each movie and then we can print
them so that I'll be doing it.
All it.
Props, dark movies instead of boxing to be having movies, not map.
And then.
It'll be getting.
Who attributes on average to that I'm a consolidator movies, movie and index.
Index of each item.
The note we can read at the.
Written or we can do the negative for the image.
So classmen will be like, let me give you customer like, I'll be using wood chips, I'll be giving
the class names.
Image container.
This is also good glass.
The Flex.
This content.
Stock.
So these are all going to be fought.
These are all the bootstrap classes that I'll be using for the styling purpose.
And inside this old building, getting the image.
So it will be, as you know, it will be movie poster that will get.
Well, we don't posted.
We will have to give some tax so that if they had oil loading the poster, then we can see this text
what the image depicts.
So if the damage.
So, yeah, so with this, we can render all the movies the simple, it's not the simple thing that
we need is that we have created a default like hot, put it back for movies.
We send the information to a component through the form of props.
And then we got hold of the props and then the props.
We had.
Like a lot, this is not movies like they should be warnings.
Instead, the props were accessing movies and mapping through all the movies, we'll be getting each
movie item and then movie poster gives the source for that image and then it will display that image.
So if you check whether the bootstrap is installed or not.
So I bootstrap it successfully in Australia and chicken packages and rather bootstrap it and Charlotte
not.
Oh.
It be having back Edward James sound like I was going to switch it already.
You can do that.
So they have done with the movie industry, have exploded.
Export default when we list.
And in our broadcast, we have to import the movie list.
And both were released.
From.
Components.
So now, as you can see, this is a problem like we are able to get the alternate like, as you can
see inside the more military pressure than the alternatives, but we are not able to get done.
We don't put to in check why that is happening.
This is happening because, like we are getting there or do you say we are giving the data already yet,
but not actually calling?
You are too like we are not fitting that you are in fight, so that will be doing the get movie request.
So they did a small error in the code that they wrote that Israeli are not able to.
And that the movie images, so that is basically here, if you can see how gorgeous the key name of
the poster is starting with Captain, so is and still be after being struck.
We're not supposed to have this gap that we already know in your refrigerator.
You can see it.
What would it be for the image that we are giving as a hot credit PA we can render them interpret?
So now we have successfully saw how to render of the movie posters from the.
Albeit or IMDb red tape that we saw in the previous video.
So in the next reader, we see how to get these movies by the search, by implementing the search feature,
the heading out as movies and the state of light as you saw in the interruption meter, how it will
be the stating everything in a single room.
We can search over here and then get the movies in a single room that will see from the next film.