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
- 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.
-
And then at the end of here,
-
we can reach directly for prop
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!