Astro Syntax vs. JSX

When it comes to Astro’s template syntax, it closely resembles JSX with a few key differences that we need to cover. However, we also need to point out that Astro components themselves have different structures.

Component structure

Each component in Astro can be divided into the following two sections:

• Component script: Anything that needs to be run on the server should be created here. Code written in the component script will not be bundled and included in the final HTML file.

• HTML layout: This is the layout of the component itself. It can contain any valid HTML tags and other Astro components. Elements created here will be rendered in the browser.

To get a better understanding of what an Astro component looks like, take a look at the following example. The beginning and end of the component script is denoted by ---, similar to how frontmatter is formatted in Markdown files.

Component props

Components can also accept properties (props for short), just like components in React. Let’s take a look at the following example, where we pass props to an Astro component to display a heading:

As we can see, we need to create the import statements in the component script. Open Heading.astro ...