AstroNova
Technical • • 2 min read •
-- views

Getting Started with Astro - Part 2: Components

Learn how to create and use components in Astro, including Astro components and integrating UI frameworks.

astro tutorial components react
Getting Started with Astro - Part 2: Components

Astro Tutorial Series

Part 2 of 3
Getting Started with Astro - Part 1: Introduction2Getting Started with Astro - Part 2: Components Current 3Getting Started with Astro - Part 3: Routing

Building Components in Astro

Welcome to Part 2 of our Astro tutorial series! Today we’ll explore the powerful component system that makes Astro so flexible.

Astro Components

Astro components (.astro files) are the foundation of your site:

---
// Component Script (JavaScript)
const greeting = "Hello, World!";
const items = ["Apple", "Banana", "Cherry"];
---

<!-- Component Template (HTML) -->
<div class="greeting">
  <h1>{greeting}</h1>
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
</div>

<style>
  .greeting {
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
  }
</style>

Component Props

Pass data to components using props:

---
// Card.astro
export interface Props {
  title: string;
  description: string;
  href?: string;
}

const { title, description, href } = Astro.props;
---

<article class="card">
  <h2>{title}</h2>
  <p>{description}</p>
  {href && <a href={href}>Learn more →</a>}
</article>

Using the component:

---
import Card from '../components/Card.astro';
---

<Card 
  title="My Card" 
  description="This is a reusable card component"
  href="/learn-more"
/>

Slots for Content Projection

Use slots to pass content into components:

---
// Layout.astro
---
<html>
  <head>
    <slot name="head" />
  </head>
  <body>
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot /> <!-- Default slot -->
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </body>
</html>

Using UI Framework Components

Astro supports multiple frameworks:

---
import ReactCounter from '../components/Counter.jsx';
import VueCard from '../components/Card.vue';
import SvelteButton from '../components/Button.svelte';
---

<!-- Use client:* directives for interactivity -->
<ReactCounter client:load />
<VueCard client:visible />
<SvelteButton client:idle />

Client Directives

DirectiveWhen it Loads
client:loadImmediately on page load
client:idleWhen browser is idle
client:visibleWhen component enters viewport
client:mediaWhen media query matches
client:onlyClient-side only (no SSR)

Component Organization

Keep your components organized:

src/components/
├── common/        # Shared components
│   ├── Button.astro
│   └── Card.astro
├── layout/        # Layout components
│   ├── Header.astro
│   └── Footer.astro
└── features/      # Feature-specific
    ├── BlogCard.astro
    └── SearchBox.astro

Next Steps

In Part 3, we’ll cover:

  • File-based routing
  • Dynamic routes
  • API endpoints

This is Part 2 of the Astro Tutorial Series. ← Back to Part 1 | Continue to Part 3 →

Related Posts

Comments