52. Using the Components

Jul 14, 2026 04:27 · 3:15 · English · Whisper Turbo · 1 Ke Keiki

E pau kēia hoʻoili i kēia lā. Hoʻonui no ka mālama mau →

Ka Papa Hana

0:01

S… Speaker 1 (52. Using the Components)

We created all these components.

0:03

S… Speaker 1 (52. Using the Components)

Let's start using them.

0:05

S… Speaker 1 (52. Using the Components)

I will start using them in the app component HTML file.

0:09

S… Speaker 1 (52. Using the Components)

Here,

0:10

S… Speaker 1 (52. Using the Components)

where I say I'm working,

0:11

S… Speaker 1 (52. Using the Components)

here I want to display my app recipes component.

0:14

S… Speaker 1 (52. Using the Components)

So the one we created here in the recipes folder.

0:17

S… Speaker 1 (52. Using the Components)

And below it,

0:18

S… Speaker 1 (52. Using the Components)

the app shopping list component.

0:21

S… Speaker 1 (52. Using the Components)

So this component here.

0:23

S… Speaker 1 (52. Using the Components)

If we save this.

0:25

S… Speaker 1 (52. Using the Components)

We see recipes works and shopping list works,

0:27

S… Speaker 1 (52. Using the Components)

which of course are the default strings the CLI gave us here.

0:31

S… Speaker 1 (52. Using the Components)

So with these added and working here,

0:34

S… Speaker 1 (52. Using the Components)

let's now also work on the individual components here,

0:37

S… Speaker 1 (52. Using the Components)

starting with recipes maybe.

0:39

S… Speaker 1 (52. Using the Components)

In my recipes component,

0:42

S… Speaker 1 (52. Using the Components)

as I said,

0:43

S… Speaker 1 (52. Using the Components)

in my setup,

0:44

S… Speaker 1 (52. Using the Components)

I want to have the recipes list and detail next to each other.

0:48

S… Speaker 1 (52. Using the Components)

So for this,

0:48

S… Speaker 1 (52. Using the Components)

I'll add a row div here.

0:51

S… Speaker 1 (52. Using the Components)

And in this row,

0:52

S… Speaker 1 (52. Using the Components)

I'll add a div with the class colmd5 to

0:57

S… Speaker 1 (52. Using the Components)

have a smaller column on the left.

0:59

S… Speaker 1 (52. Using the Components)

And then another one with colmd7,

1:02

S… Speaker 1 (52. Using the Components)

using these bootstrap column sizing classes,

1:05

S… Speaker 1 (52. Using the Components)

to have a broader column on the right.

1:07

S… Speaker 1 (52. Using the Components)

So two columns next to each other.

1:09

S… Speaker 1 (52. Using the Components)

Now in the first column,

1:11

S… Speaker 1 (52. Using the Components)

I want to have my app recipe list component.

1:15

S… Speaker 1 (52. Using the Components)

In the second one,

1:17

S… Speaker 1 (52. Using the Components)

I want to have my app recipe detail component,

1:20

S… Speaker 1 (52. Using the Components)

just like that.

1:21

S… Speaker 1 (52. Using the Components)

So that should place these two components next to each other.

1:25

S… Speaker 1 (52. Using the Components)

If we save this and have a look at our app,

1:28

S… Speaker 1 (52. Using the Components)

We indeed see list and detail below each other simply

1:32

S… Speaker 1 (52. Using the Components)

because due to the console,

1:34

S… Speaker 1 (52. Using the Components)

the viewport was so small and then it automatically wraps them

1:38

S… Speaker 1 (52. Using the Components)

below each other.

1:38

S… Speaker 1 (52. Using the Components)

So if you have a normal page,

1:40

S… Speaker 1 (52. Using the Components)

they sit next to each other and I actually want them to wrap below each other on

1:44

S… Speaker 1 (52. Using the Components)

smaller pages.

1:45

S… Speaker 1 (52. Using the Components)

So this is now working too.

1:48

S… Speaker 1 (52. Using the Components)

Now in my recipe list component here,

1:51

S… Speaker 1 (52. Using the Components)

as I said,

1:52

S… Speaker 1 (52. Using the Components)

I somehow want to include that recipe item.

1:55

S… Speaker 1 (52. Using the Components)

So here I will later output a list of items.

1:58

S… Speaker 1 (52. Using the Components)

For now, I will simply include the recipe item here,

2:01

S… Speaker 1 (52. Using the Components)

app recipe item,

2:02

S… Speaker 1 (52. Using the Components)

so only the selector,

2:03

S… Speaker 1 (52. Using the Components)

which should now ensure that we no longer see recipe list works,

2:07

S… Speaker 1 (52. Using the Components)

but recipe item works,

2:09

S… Speaker 1 (52. Using the Components)

because that's the only content of our recipe list component for now.

2:12

S… Speaker 1 (52. Using the Components)

So that's looking great.

2:14

S… Speaker 1 (52. Using the Components)

Now for the shopping list,

2:16

S… Speaker 1 (52. Using the Components)

I'll do pretty much the same.

2:17

S… Speaker 1 (52. Using the Components)

In my shopping list component,

2:19

S… Speaker 1 (52. Using the Components)

here I want to display the list and above it this shopping edit

2:24

S… Speaker 1 (52. Using the Components)

area.

2:25

S… Speaker 1 (52. Using the Components)

So I'll add a row here too.

2:26

S… Speaker 1 (52. Using the Components)

And in this row,

2:28

S… Speaker 1 (52. Using the Components)

let's say we'll call XS10 to create a very wide column

2:32

S… Speaker 1 (52. Using the Components)

here.

2:32

S… Speaker 1 (52. Using the Components)

I'll first add my shopping edit component to have this

2:36

S… Speaker 1 (52. Using the Components)

editing area at the top where we can add new ingredients or edit existing

2:40

S… Speaker 1 (52. Using the Components)

ones.

2:41

S… Speaker 1 (52. Using the Components)

And then I want to have a horizontal line here and somehow output

2:46

S… Speaker 1 (52. Using the Components)

my list below this.

2:48

S… Speaker 1 (52. Using the Components)

So that is the rough setup I want to have in this component.

2:51

S… Speaker 1 (52. Using the Components)

So it should work like this.

2:53

S… Speaker 1 (52. Using the Components)

That will be the recipe list component later on.

2:55

S… Speaker 1 (52. Using the Components)

We're going to fill this with more life,

2:57

S… Speaker 1 (52. Using the Components)

but for now,

2:58

S… Speaker 1 (52. Using the Components)

I'm very happy with how that looks.

3:00

S… Speaker 1 (52. Using the Components)

Talking about how it looks,

3:02

S… Speaker 1 (52. Using the Components)

the header really kind of destroys our whole layout here.

3:06

S… Speaker 1 (52. Using the Components)

So let's work on the header in the next lecture,

3:08

S… Speaker 1 (52. Using the Components)

and let's actually bring it into its almost final form already.

I hana ʻia kēia transcript e AI (hoʻomaopopo leo mau). Hiki ke loaʻa nā hewa — e hōʻoia i ka leo mua no ka hoʻohana nui. Ka'ōlelo aʻo AI

❤️ Love STT.ai? E haʻi i kou mau hoaaloha!

Hōʻuluʻulu

Kaomi Summarize e hana i ka AI mahele o kēia transcript.

E nīnau i ka AI e pili ana i kēia transcript

E nīnau i kekahi mea e pili ana i kēia transcript - e loaʻa ana ka AI i nā ʻāpana pili a me ka pane.

Hoʻouna i kekahi