Making A Reusable Movie Card Component
In this lesson, we'll learn how we can make a movie card component with EdgeJS that we can define once and easily use throughout our markup.
- Author
- Tom Gobich
- Published
- Feb 10, 24
- Duration
- 10m 24s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Making A Reusable Movie Card Component
-
(upbeat music)
-
So EdgeJS also has the concept of components.
-
Now, unlike Vue or React or anything like that,
-
where it's front-end based,
-
these are server-side components,
-
so they don't have reactivity baked into them.
-
They're used to define reusable markup
-
within our template system.
-
Components also have their own isolated state as well.
-
So if you share something from your route handler
-
into your Vue, your component won't know about it
-
unless you explicitly pass that variable
-
from your Vue to your component.
-
So we have our three movies, right?
-
Right now, they're just in a list,
-
but let's go ahead and create a card component for them,
-
and we'll use the Pines UI card here to do so.
-
So if we go into the code here,
-
we'll see it's just some markup using TailwindCSS.
-
So we can go ahead and give this a copy
-
just to give us a quick jumpstart
-
on what exactly we are doing here.
-
Let's go ahead and hide our browser back away.
-
Within our Vues, let's go ahead and right-click it,
-
and let's do New File.
-
We'll create a new folder called Components.
-
This is where all of our components will live within EdgeJS.
-
And then let's go and create a new folder
-
within here called Movie,
-
and then within Movie, we'll create a card.edge file.
-
The full tree of that is now Components, Movie, card.edge.
-
We can paste the contents that we copied
-
from Pines UI directly into here.
-
And to match the slate coloring
-
that we've been doing so far,
-
I'm just going to go ahead
-
and find a replace neutral with slate.
-
So let's go ahead and dive back into our homepage,
-
and let's attempt to use this.
-
So we don't need any of the extra stuff
-
that we've added in here for our list item.
-
Currently, so let's just go ahead
-
and get this all back down to just a simple list.
-
Above our unordered list,
-
let's go ahead and create a new element.
-
We'll put these within a div for right now.
-
Let's call this class.
-
We can flex, allow them to wrap,
-
and we'll give them a gap of three.
-
There's a couple of different ways
-
that we can make use of our new card component.
-
We can use the component tag, so component,
-
and then provide the path to the component.
-
So that would be components, movie, and then card.
-
Let's go ahead and give this a save
-
and see exactly what we're looking at.
-
So let's dive back into our browser,
-
and sure enough, there is the card right above our list.
-
All right, so let's go ahead and hide our browser back away.
-
So we have our card.
-
Now we need to figure out how to provide movie information
-
into our card.
-
Well, the second argument is how we can pass props
-
directly into the component
-
so that they will be accessible
-
via the state of the component,
-
enabling us to use it the same way
-
that we are here within our page.
-
So this particular component's really only in charge
-
of rendering out one movie.
-
So what we'll wanna do is reapply our loop.
-
So let's go and copy our each, paste it above our component,
-
and then we'll end it after our component.
-
We won't need the index,
-
so we'll go ahead and get rid of that.
-
Okay, next, let's go ahead and just provide our movie
-
into the props of our component.
-
We can give this a save, and we can jump back into our card.
-
Within our H2, we can go ahead and hit Enter
-
to break that down into a new line,
-
and we can use interpolation, so double curly braces,
-
to attempt to reach for our movie title.
-
We can do the same thing for our paragraph.
-
We can go ahead and hit Enter to break that into a new line,
-
and we can apply our movie summary.
-
Lastly, we have our button.
-
For us, we don't actually want this to be a button,
-
but rather an anchor, so we'll change that to an A,
-
and then we'll do href,
-
and then we'll link to our movie detail page.
-
So that's route, movies.show,
-
and then we'll wanna provide the slug of movie slug.
-
We're gonna wanna jump to the end of the file
-
and replace the end tag to an A as well,
-
and we're not going to be viewing a product,
-
but rather view movie.
-
Okay, cool.
-
So now we've passed a movie into the props
-
of this component, and we're making use
-
of all of the different properties on our movie
-
to populate the different details of the card itself.
-
So at this point, if we go ahead
-
and dive back into our browser,
-
we should see three of these cards.
-
They're in a list at the moment, but we will fix that,
-
and if we take a look at the title,
-
we'll see My Awesome Movie, Awesome Movie, The Trilogy,
-
and Another Awesome Movie.
-
So we're getting one for each movie that we have.
-
Additionally, if we go ahead
-
and hover over the View Movie button,
-
we'll see down in the bottom left-hand corner
-
that it is attempting to go into the movie detail page
-
for each one of the different movies that we have.
-
We can go ahead and click on one, and sure enough, it works.
-
So let's go ahead and put these into a grid.
-
So let's hide our browser back away,
-
and we'll wanna go back out to our homepage.
-
And so if we take a look at our top-level div here,
-
and we scroll over through the class list,
-
we'll see that it has a width of 380 pixels.
-
Well, at this point in time, we don't really know
-
what width we want it to be, because we're not quite sure
-
how many movies we're gonna wanna squeeze
-
onto a single row.
-
It would be nice to be able to specify that at this level,
-
where we're actually using the movie component,
-
because we could be using it in a grid
-
that has plenty of room, or we could be using it
-
within an aside that's limited to just 300 pixels.
-
That's where that ATTRS helper that we took a look at
-
on the HTTP variable in the last lesson comes into play.
-
So if we dive back into here,
-
let's give our class list here a copy.
-
We can use keyboard shortcuts here
-
to just select all of our class lists.
-
So I'm gonna Command + Shift, and then hit the right arrow,
-
and it's gonna jump us to the end of the line
-
and select everything in between.
-
And then we can let go of Command,
-
so that we're just holding Shift,
-
and hit the left arrow two times.
-
Command + X to cut it, and there we go.
-
Now we can get rid of our class altogether.
-
So now let's go ahead and do double curly braces,
-
and then HTML, ATTRS, and let's break this down,
-
so that it'll be a little bit easier to work with.
-
We'll do an array, we'll add in an object,
-
and define our class.
-
We'll have our class be an array.
-
We'll start it with a string,
-
and then we'll just go ahead and paste everything
-
that we had cut into here.
-
Lastly, let's also get rid of the specific width designation.
-
Cool, so at this point, we are actually specifying
-
the exact same thing that we had started with.
-
So at this point, we're not actually able
-
to define anything outside of our cards on our homepage,
-
where we're actually using the component,
-
specifying what we want the width to be.
-
Because within our card component,
-
we're not making use of anything
-
that would allow us to change this at our homepage level.
-
We'll want to reach for something like we are
-
with our movie details,
-
to enable us to add classes into our class array.
-
What we would like to do is be able to just use class,
-
but that's a reserved word within JavaScript.
-
So we're gonna get an error if we just attempt to do that.
-
However, we can reach for a property
-
called $props, to read directly from a props object,
-
where we can then use class
-
to add any additional classes into our class array.
-
So now if we give this a save,
-
jump back to our homepage,
-
within the props of our component,
-
we can now add in an additional item called class
-
and add in width one third.
-
If we give this a save, jump back into our browser,
-
that's a little bit better.
-
The gap that we applied onto our grid
-
is kind of messing that up a little bit.
-
So let's go ahead and get rid of that gap
-
and see if that fixes our row.
-
Sure enough, there we go.
-
So now the one third width is being applied
-
to each one of our different cards within here,
-
but we're not done yet.
-
So let's go ahead and hide our browser back away,
-
jump back into our card component.
-
This props variable can actually directly digest
-
into attributes itself.
-
So once more, let's go ahead and copy the class list
-
that we have right here.
-
And let's get rid of everything that we have so far
-
within our outer double curly braces.
-
So we can reach directly for props
-
and this property itself actually has the capability
-
to say, all right, let's digest these props to ATTRS.
-
Now, when we save this and we jump into our browser,
-
we're gonna see a little bit of an adjustment
-
that we need to make,
-
but for the most part, things still look right.
-
Let's go ahead and right click though,
-
and we'll see where the issue is coming into play.
-
So if we scroll down a little bit
-
and we take a look at the outermost div for these cards,
-
you'll see that we get our class of width one third,
-
which is being applied via our props,
-
but we're also getting our movie object added in
-
as an attribute, which we don't want one bit.
-
Additionally, we haven't added in
-
our other classes yet either.
-
So what we can do is if we hide that back away
-
and minimize our browser once more,
-
is we can tell props that we want to switch everything
-
to attributes except and provide this in an array
-
and provide that the movie to specify
-
that we want to change all of our props
-
except our movie array to ATTRS
-
or attributes for this particular div.
-
So this is gonna fix the issue
-
where we're dropping our movie directly
-
into the divs attributes here,
-
but we still need to add in the classes that we have copied.
-
So let's also add class to this except list as well.
-
And let's add that in ourselves.
-
So I'm gonna go ahead and collapse this down
-
to a single line here,
-
and I'll give it a single line break here.
-
And above this, we can specify our class,
-
do double curly braces within here.
-
And now I can do our HTML class name designation
-
and in our array, paste in the string that we have copied.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!