Lesson 001: Understanding .astro Files

1. The Frontmatter Section

Message from frontmatter: Hello from Astro!

This page was built at: 12/14/2025, 4:33:56 PM

Sum of [1,2,3,4,5] = 15

2. File-Based Routing

This file is located at: src/pages/001-lesson-basics.astro

Because it's in the pages/ directory, Astro automatically creates a route for it.

You can access it at: http://localhost:4321/001-lesson-basics

Key rule: Any .astro file in src/pages/ becomes a page on your site!

3. How Astro is Different from React

• Build time execution: The frontmatter code runs once when you build your site, not in the browser. In React, your component code runs in the browser on every render.
• Zero JavaScript by default: This page has NO JavaScript sent to the browser (unless you add it). It's pure HTML. React sends a whole JavaScript bundle.
• HTML-first: Astro components render to HTML at build time. React components render to HTML in the browser using JavaScript.

4. Try This

Open your browser DevTools and check the Network tab. Notice how little JavaScript this page loads compared to a typical React app!