00:00:02 Let's develop a movie card component.

00:00:05 We can do that by creating a new component in the components folder and call it moviecard.jsx.

00:00:14 Run RAFCE and then import it directly within your app.jsx.

00:00:20 Specifically, we want to render each one of these cards instead of a movie title.

00:00:25 So remove this p tag or rather just copy it.

00:00:29 And instead of it, render a movie card, which you can automatically import from components.

00:00:35 Pass in a key equal to movie.id and also pass in a prop of movie equal to movie.

00:00:43 Remember how props work?

00:00:44 We want to pass all of this information from here about each one of these movies to the movie card.

00:00:51 This will allow you to destructure that movie right here.

00:00:54 And then within this div, we can render the same thing we previously had, which is a p tag that renders the movie title.

00:01:01 So, if you go back, nothing should change.

00:01:03 Everything is still the same, but now we have this new component within which we can work to make it fully reusable and not keep everything in our app,

00:01:12 which would clutter the view.

00:01:14 Now, we can put things that specifically belong to the movie card within it.

00:01:18 Now, I already told you how we can destructure the props, so we don't have to say props.movie.something.

00:01:25 But this time we'll have to say movie.something many times.

00:01:29 Movie.id, movie.posterCard, movie.title, and so on.

00:01:34 So what we can do is destructure more properties from the movie itself.

00:01:39 You can do that by saying colon and then saying which properties you want to take out, such as the title.

00:01:45 And now you can simply say title.

00:01:48 We don't need a key in this case because we already have it here where we're mapping over it.

00:01:52 But now you can see the same thing, but we don't have to repeat ourselves.

00:01:56 We'll also use a couple of other things belonging to a movie, such as a vote underscore average for the rating, poster underscore path,

00:02:06 release underscore date, and original underscore language.

00:02:11 You can also put this in a new line so it's a bit easier to see what's happening.

00:02:16 Great.

00:02:17 Now let's create this movie card by giving this div a class name equal to movie dash card.

00:02:26 Already, this will apply some styles that I've prepared within the index.css.

00:02:31 So if you head over into the index.css and search for the movie card, you should be able to see that this will apply a dark background,

00:02:41 a bit of padding, rounded corners, and some shadows.

00:02:45 Exactly what we get over here.

00:02:47 Instead of a P tag right here, let's render an image, and this image will render the poster path.

00:02:53 So let's say source is equal to if a poster path exists, then we want to render HTTPS colon forward slash forward slash image.tmdb.org forward slash T

00:03:09 forward slash P forward slash W 500 forward slash poster underscore path.

00:03:16 This is the full path of that image.

00:03:19 And if a poster pad doesn't exist, we can render forward slash no movie dot PNG.

00:03:26 which will render our dummy image.

00:03:29 So with that in mind, you can see that now we get access to the images belonging to all of these great movies, looking great even on mobile devices.

00:03:39 As you can see on mobile, we can only see one per row, but as you expand it, check this out, you can see two, three, four,

00:03:48 and it is just looking great.

00:03:50 Perfect.

00:03:51 We can also give an alt tag to this image, and it'll be equal to the movie title.

00:03:56 Below the image, we can render a div with a class name equal to margin top of four, and within it, we can render an h3 that'll simply render the movie title.

00:04:09 Perfect.

00:04:09 Then we can go below that h3, render a div that'll have a class name of content, And within it, we can render another div that'll have a class name of rating.

00:04:21 And within it, render an image with a source equal to star.svg with an alt tag of star icon.

00:04:31 And now you can see a little star right here belonging to each one of these movies.

00:04:35 Next to the image, we can also render a p tag.

00:04:39 which will check if voteAverage exists.

00:04:42 And if it does, we want to render the voteAverage.toFixed1.

00:04:48 And if it doesn't, we can just say something like na, doesn't exist.

00:04:52 So now this will round down the number to the first fraction digit, 7.7, 6.5, and so on.

00:04:59 Looking great.

00:05:00 We can head below this div right here and render a span.

00:05:04 This pan can render one of these special dot characters just to create some separation.

00:05:09 I think if you just google for dot symbol copy you should be able to find it somewhere.

00:05:14 There we go, this is the one.

00:05:15 So you can copy it and then paste it here.

00:05:18 I like using those to create some separation.

00:05:20 Below it we can render a p tag with a class name of Lang as in language.

00:05:27 And here we can render the original language.

00:05:30 In this case, it says EN as in English.

00:05:32 After that, we can render another one of these spans.

00:05:37 So let's actually put it below.

00:05:39 And then below that span, we can create another p tag, which will have a class name equal to year.

00:05:45 And there we can check if a release date exists.

00:05:50 Then we want to render release date dot split based on the dash.

00:05:57 and only take the first part of it.

00:05:58 So we only want to get the year, else we'll say NA.

00:06:02 So now we get 2024, 2024, 2025. Great.

00:06:07 We have the newest movies right here.

00:06:09 But even if you're watching this in 2026 or 7 or 8, let me know in the comments down below.

00:06:15 The video should still be relevant.

00:06:17 But if that is the case, it's highly likely that I have more relevant content on jsmastery.pro.

00:06:23 So head over there and watch it there.

00:06:25 But with that in mind, believe it or not, this is it for a movie card.

00:06:29 This is called a Presentational Component.

00:06:32 It doesn't handle any logic.

00:06:34 It is just accepting some props we pass into it and rendering them.

00:06:38 So now if I full screen this, you'll be able to see how it looks like as we scroll through those movies.

00:06:44 And let me zoom in just a tiny bit.

00:06:46 Take a look at how great this looks.

00:06:48 We're getting full resolution images back and we're rendering them right on the screen.

00:06:53 And if I render, most likely they'll be cached already, so you won't even be able to see the loading screen.

00:06:59 But if you have a slower connection, you'll be able to see that loader.

00:07:02 Now, in the next lesson, let's power up our use of this API by implementing search.

00:07:08 That way, you'll actually be able to type in a movie name you want to find, and the top matches will pop up right here.