Astro Syntax vs. JSX
Explore how Astro's syntax compares to JSX by understanding component structure, props, slots, variables, loops, and conditional rendering. This lesson helps you grasp key distinctions such as Astro's use of kebab-case attributes, support for multiple elements without fragments, and handling events with vanilla JavaScript, enabling you to build efficient Astro components.
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.
/// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" />
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:
---
const { text } = Astro.props
---
<h1>{text}</h1>As we can see, we need to create the import statements in the component script. ...