1. 6
    Create an Astro Component for Links
    5m 24s

Create an Astro Component for Links

InstructorLazar Nikolov

Share this video with your friends

Send Tweet

It's time to get your hands dirty by creating your first Astro component.

This component will be relatively simple but very handy. You are creating a Link component that will take an href as well as an isExternal boolean telling the component whether or not it's an external link.

All components in Astro follow a similar pattern, you'll create a Props interface of all the props you want to pass the component. This will tell Astro what props your component expects and throw errors if it doesn't get those. Then you'll actually destructor those props from Astro.props

Finally we'll create some html and conditionally apply nofollow noopener norefferer external rel properties.

You'll also see how <slot />s work to accept children that are passed to the component.

Adan Rodriguez
~ 8 months ago

Some content is missing between Lesson 3 and 4 since Lesson 4 does not have the current version of Layout.astro as shown in this video.

Lazar Nikolovinstructor
~ 8 months ago

Oh good catch Adan! It seems the order of the lessons got mixed up a little. We'll fix it right now. Thank you!

Lazar Nikolovinstructor
~ 8 months ago

Lesson 4 should be "Create Static Pages in Astro Using File Based Routing", but we'll take care of that right now.

Lazar Nikolovinstructor
~ 8 months ago

Done! Zac Jones saved the day! 😁 Do a refresh and the order should be fixed now, Adan.