Course lesson

Create an Astro Component for Links

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

Duration
5 min
Access
Included
Transcript
Retained from source evidence

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.