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.
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