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.
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.
Oh good catch Adan! It seems the order of the lessons got mixed up a little. We'll fix it right now. Thank you!
Lesson 4 should be "Create Static Pages in Astro Using File Based Routing", but we'll take care of that right now.
Done! Zac Jones saved the day! 😁 Do a refresh and the order should be fixed now, Adan.