.astro Components

In React you write components as JavaScript functions that return JSX. In Astro you write components as .astro files — a superset of HTML that has an optional JavaScript/TypeScript block at the top called the frontmatter.

The mental model shift: a React function component runs in the browser on every render. An Astro component runs once at build time (or on the server) and ships pure HTML — zero JavaScript by default. No virtual DOM, no re-renders, no hydration cost.

This module walks through every building block of a .astro component, anchored to what you already know from React.

Module lessons

Lesson	What you’ll learn
Frontmatter & Template	The `---` block vs a React function body
Props	`Astro.props` vs React props
Slots	`<slot />` vs `children`
Expressions	Template expressions vs JSX
Importing Components	Composition in `.astro`
Server-Only & Scripts	Zero JS by default; adding browser JS

Your first .astro component

A React component and its .astro equivalent side by side:

// Greeting.jsx
export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

---
// Greeting.astro
const { name } = Astro.props;
---
<h1>Hello, {name}!</h1>

And here is the same idea as a runnable page:

Astro

---
const name = "React developer";
const year = new Date().getFullYear();
---
<html lang="en">
  <head><meta charset="utf-8" /><title>Hello</title></head>
  <body>
    <h1>Hello, {name}!</h1>
    <p>Built in {year}. No JavaScript shipped to the browser.</p>
  </body>
</html>