Write in Astro: the syntax ✍️

#astro #javascript #webdev #frontend

Overview

Hello everyone 👋
In this article, we'll talk about Astro syntax and how it's incredibly easy to learn if you're comfortable with HTML.
Let's start! 🤙

Astro has JSX-like expressions? 🤔

The answer to the question is yes.
Astro syntax is a "superset" of HTML. The syntax was designed to feel familiar to anyone with experience writing HTML or JSX, and adds support for including components and JavaScript expressions.
If you're a React developer, you'll find a lot of similarities when developing a project at the syntax.

Variables

You can define local JavaScript variables inside of the frontmatter component script between the two code fences of an Astro component. You can then inject these variables into the component’s HTML template.
Where you've seen this practice before? That's right, JSX! 🤩

---
const name = "Hugo";
---

<div>
  <h1>Hello, I'm {name}!</h1>
</div>

Dynamic Attributes

Local variables can be used in curly brackets to pass values to components created and invoked in the project.
We think the example above is a generic component that takes "name" as props:

---
const name = "Hugo";
---

<HelloComponent name={name} />

It is not possible to pass functions and objects to HTML elements, because HTML attributes will be converted to strings.
For example:

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ This doesn't work! ❌ -->
<button onClick={handleClick}>Click me!</button>

If you want use a client-side script to add the event handler, you'll need to use vanilla JavaScript like this:

<button id="button">Click Me</button>
<script>
  function handleClick () {
    console.log("button clicked!");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

Dynamic HTML

It is possible generate dynamic HTML with JavaScript function like JSX, in this way for example:

---
const languages = ["Python", "JavaScript", "C#"];
---
<ul>
  {languages.map((lang) => (
    <li>{lang}</li>
  ))}
</ul>

Astro can conditionally display HTML using JSX logical operators and ternary expressions, in this way:

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

Dynamic Tags

This is a great feature: Astro provide the possibility to assign an HTML tag or even a component to a variable:

---
import HelloComponent from "./HelloComponent.astro";

const Title = 'h1'
const Component = HelloComponent;
---
<Title>Hello!</Title>
<Component />

However, three points must be considered when using dynamic tags:

Variable names must be capitalized. For example, use Title, not title: Astro will try to render your variable name as a literal HTML tag.
Hydration directives are not supported. When using client:* hydration directives, Astro needs to know which components to bundle for production, and the dynamic tag pattern prevents this from working.
The define:vars directive is not supported. If you cannot wrap the children with an extra element, then you can manually add a to your Element (Title in the example above).

Fragments

Astro supports <></> notation like JSX's syntax to wrap any element within and also provides a built-in <Fragment /> component to use set:* directives to inject an HTML string.

Astro syntax vs JSX

As mentioned at the beginning, Astro syntax is a superset of HTML: it was designed to feel familiar to anyone with HTML or JSX.
But there are a couple of key differences between .astro files and JSX.

Attributes: in Astro, you use the standard kebab-case format for all HTML attributes instead of the camelCase used in JSX and this even works for class, which is not supported by React.
Multiple Elements: Astro component template can render multiple elements with no need to wrap everything in a single <div> or <>.
Comments: both HTML and JavaScript comments are supported.

Conclusion

Astro's syntax is a super set of HTML, which allows frontend developers of all kinds to work as if they were using HTML or JSX.
It is amazing, and now...

Happy coding!✨

Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻