Component Tags, State, and Props
In this lesson, we'll learn how to use EdgeJS components within AdonisJS as direct tags. We'll also learn about our component's state and props
- Author
- Tom Gobich
- Published
- Feb 13
- Duration
- 4m 53s
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
Component Tags, State, and Props
-
(upbeat music)
-
So since we put our movie card component directly
-
inside of our views components directory,
-
EdgeJS will actually register any components
-
that we put within views components as a tag,
-
meaning we can use it similarly
-
to how we're using the include tag right up here.
-
As an example, let's go ahead and redefine
-
our movie card component here.
-
So we can do at,
-
and we just need to directly provide the tag name.
-
Now the tag name for our components
-
just needs to point to the component path
-
within the components directory.
-
So that's gonna be movie,
-
and then we can do dot to reach inside
-
of the movies directory and then provide card.
-
So we can do movie.card, just like so,
-
and that's gonna call our movie.
-
Now we can copy over our props.
-
So let's go copy these.
-
And we just paste them into the function
-
that we're calling for the actual movie component.
-
So right in here.
-
And these will get passed through as props,
-
the same as it is within our full component usage.
-
So now we can actually get rid of our full component usage
-
and just use the tag directly.
-
So if we give this a save, jump back into our browser,
-
we see the exact same thing.
-
Let's go ahead and hide this back away.
-
As you can see, the card here is underlined,
-
same with our include.
-
Whenever we see this,
-
we can command or control click into it
-
to actually dive into the file.
-
Now in the last lesson,
-
we learned about the props property,
-
and then it has some superpowers baked into it,
-
like being able to plop our props directly as attributes
-
anywhere within this component
-
by calling the toAttributes method.
-
But we also learned with our class
-
that we can read it directly as a stateful type of object.
-
So now just like we inspected the state of our page,
-
let's go ahead and do the exact same thing here.
-
Outside of our divs,
-
let's go ahead and plop inspect state, just like so.
-
Okay, let's go ahead and dive back into our browser,
-
and we'll see all of the utilities
-
that are globals throughout EdgeJS first.
-
App information, request information, those are all globals.
-
But if we scroll down to the bottom,
-
this is where we'll start to see stateful information
-
specific to the component.
-
For example, the movie that we're passing in as props,
-
the class that we've passed in as a prop,
-
you'll see something called slots here.
-
We'll cover what those are here in an upcoming lesson.
-
And you'll see the props has both our movie
-
and our class within it.
-
And EdgeJS is also providing those directly
-
as default values onto our state.
-
So as we pass things in as props,
-
they'll go into this object,
-
and we can always access them from this object,
-
but they're also spread into the overall state
-
of the component itself, as we see here.
-
And it's for that reason
-
that we can reach for movie directly
-
without having to do props.movie.
-
Now you can absolutely do props.movie
-
if that is easier for you to understand,
-
but just note that you in no way need to do that
-
because movie is provided directly onto the state anyway.
-
So let's go ahead and open up the documentation
-
for EdgeJS real quick.
-
So we'll dive into here.
-
We'll go to components, props,
-
and take a look at all of the options for props.
-
So if we scroll down just a little bit
-
past the initial example,
-
we'll see serialized props to HTML attributes.
-
This is something that we've already covered and utilized,
-
but we can also see an alternative usage here as well.
-
So while we split it apart,
-
you can also merge in your class list here as well.
-
So let's go and give that a try.
-
So let's dive back into our application,
-
hide our browser back away.
-
Within our card component, we'll scroll up a little bit.
-
Let's take our class list once more,
-
and let's just take the string portion and cut that out.
-
And then let's remove our class altogether.
-
Condense this up, and let's define a local variable here.
-
So we can do @let, class is a reserved word,
-
so we'll call this class name, equals,
-
and let's paste that string in.
-
So now we have our default class name,
-
and on our props, let's go ahead and merge that in.
-
Array, we'll provide in an object,
-
call this class, provide it in as an array,
-
and we'll do class name just like so.
-
Lastly, within our accept, we wanna get rid of class
-
so that it can actually merge together.
-
So let's give this a save and see if it worked.
-
Actually, to make it a little bit easier on ourselves,
-
let's go ahead and remove our state inspect here
-
real quick too.
-
Okay, now let's go ahead and see if it works.
-
Let's open this back up in our browser,
-
and sure enough, all of our cards still look like cards.
-
The style is still the exact same.
-
So everything worked there A-okay.
-
Let's dive back into the documentation real quick.
-
So if we continue scrolling down,
-
we can see that we can also conditionally merge
-
into an existing class.
-
So we can merge unless, remove existing styles.
-
If this is truthy, the class defined here
-
as the merged in class will be ignored.
-
If this is falsy, then this merged in class
-
will get merged into the underlying class for the input.
-
And then of course, you want to exclude
-
whatever variable you're using to determine
-
whether or not you should merge
-
from your attributes as well.
-
Cool, so let's continue scrolling.
-
And we actually start to see a props API.
-
So we can see various options that we have
-
directly for our props as well.
-
So we can determine whether or not a prop exists,
-
get a prop value by doing props.get,
-
which is an alternative approach
-
to what we were doing earlier,
-
where we were doing props.class
-
to get our class directly from the props.
-
You can simplify your prop declaration
-
by using the only key.
-
So that it will only include keys that you've provided there.
-
And as we've already seen,
-
you can do except to exclude as well.
-
Then there's the merge, merge if, and merge unless.
-
So as they showed up above here,
-
if we scroll up a little bit more
-
where we have merge unless,
-
there's also a merge if,
-
which would be an inverse conditional of merge unless.
-
And then you have the baseline merge,
-
which we've already used.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!