Astro is a powerful tool for creating web projects. When working with Astro, you’ll encounter files with the .astro extension. In this article, we’ll explore Astro components and learn how to leverage them effectively.

Let’s start by examining a sample Astro component file, specifically the one included in the Minimal template:

---
---

<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 <meta name="viewport" content="width=device-width" />
 <title>Welcome to Astro</title>
 </head>

 <body>
 <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
 </body>
</html>

An Astro component is essentially an HTML file, but with a special feature called frontmatter. Frontmatter is denoted by two --- lines at the top of the file and resembles the concept used in Markdown files. In Astro, frontmatter can be utilized to set page titles, post dates, and more.

It’s worth noting that frontmatter can be omitted if there is no content to be included. You can simply start the component with an HTML tag. However, the example above includes frontmatter as it serves as the default Astro example.

What sets Astro apart is its ability to incorporate JavaScript (or TypeScript) within components. In the previous example, the component contained html, head, and body tags because it was a page component, designed to respond to specific routes and stored in the src/pages directory.

In addition to HTML, Astro also supports Markdown files within the src/pages directory. These files can be rendered as plain HTML, unless a specific layout is defined, which we will explore in another blog post.

Astro components can also be simpler, such as the following example demonstrating how to define variables in the frontmatter using JavaScript or TypeScript and utilizing them in the HTML using a JSX-like syntax:

---
const name = 'Flavio'
---

<p>{name}</p>

It’s important to note that this JavaScript code runs at build time, not in the browser. If you wish to include JavaScript code that runs in the browser, you can simply add a <script> tag within the component:

---
const name = 'Flavio'
---

<p>{name}</p>
<script>
 alert('test')
</script>

Astro components offer a wide range of capabilities beyond variable definition. You can import components or libraries, fetch data, and define variables that are accessible within the HTML.

Scoped CSS can be defined within any component using the <style> tag:

---
const name = 'Flavio'
---

<p>{name}</p>
<style>
 p {
 color: red;
 }
</style>

When you define a component in the src/components folder, it becomes accessible throughout your Astro components. Simply import it and embed it wherever needed:

---
import Test from '../components/Test.astro'
---

<Test />

Astro components don’t use traditional JSX syntax, but they offer several improvements. For instance, to modify the head part of a page component, you can add a <head> tag. Regular HTML comments (<!-- -->) can be used instead of {/* */} for commenting. HTML special characters can also be utilized, and HTML attributes no longer need to be camelCased (e.g., className).

Astro also provides built-in components to enhance functionality. For instance, if you want to embed Markdown within your components, you can use the Markdown component:

---
import { Markdown } from 'astro/components';
---

<Markdown> # test </Markdown>

Additionally, Astro offers the Code component for syntax-highlighted code embedding directly at build time. If you prefer to use Prism (a popular library for syntax highlighting), you can utilize Prism, which includes client-side JavaScript. Lastly, the Debug component enables debugging of frontmatter code in the client-side by displaying variable contents within the page:

---
import Debug from 'astro/debug';
const name = 'Flavio'
---

<Debug {name} />

By understanding the power and capabilities of Astro components, you’ll be able to create SEO-friendly web projects with ease.

Tags: Astro, Astro Components, JavaScript, TypeScript, HTML, SEO