Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Build Movie Card Component
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.