If you know HTML, you already know enough to write your first Astro component.
JSX-like ExpressionsSection titled JSX-like Expressions
---) of an Astro component. You can then inject these variables into the component’s HTML template using JSX-like expressions!
Using this approach, you can include dynamic values that are calculated in the frontmatter. But once included, these values are not reactive and will never change. Astro components are templates that only run once, during the rendering step.
See below for more examples of differences between Astro and JSX.
VariablesSection titled Variables
Local variables can be added into the HTML using the curly braces syntax:
Dynamic AttributesSection titled Dynamic Attributes
Local variables can be used in curly braces to pass attribute values to both HTML elements and components:
HTML attributes will be converted to strings, so it is not possible to pass functions and objects to HTML elements. For example, you can’t assign an event handler to an HTML element in an Astro component:
Dynamic HTMLSection titled Dynamic HTML
Local variables can be used in JSX-like functions to produce dynamically-generated HTML elements:
Astro can conditionally display HTML using JSX logical operators and ternary expressions.
Dynamic TagsSection titled Dynamic Tags
You can also use dynamic tags by setting a variable to an HTML tag name or a component import:
When using dynamic tags:
Variable names must be capitalized. For example, use
element. Otherwise, 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.
FragmentsSection titled Fragments
Astro supports using either
<Fragment> </Fragment> or the shorthand
Fragments can be useful to avoid wrapper elements when adding
set:* directives, as in the following example:
Differences between Astro and JSXSection titled Differences between Astro and JSX
Astro component syntax is a superset of HTML. It was designed to feel familiar to anyone with HTML or JSX experience, but there are a couple of key differences between
.astro files and JSX.
AttributesSection titled Attributes
In Astro, you use the standard
kebab-case format for all HTML attributes instead of the
camelCase used in JSX. This even works for
class, which is not supported by React.
Multiple ElementsSection titled Multiple Elements
An Astro component template can render multiple elements with no need to wrap everything in a single
CommentsSection titled Comments