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!
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:
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.
Fragments & Multiple ElementsSection titled Fragments & Multiple Elements
An Astro component template can render multiple elements with no need to wrap everything in a single
<Fragment> </Fragment> or the shorthand
Fragments can also 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.
CommentsSection titled Comments