Синтаксис Astro

Если вы знаете HTML, то имеете уже достаточно знаний, для того, чтобы создать первый Astro компонент.

Синтаксис компонентов Astro - это надмножество HTML. Синтаксис был разработан так, чтобы показаться знакомым любому, кто имеет опыт написания HTML или JSX, и добавляет поддержку для встраивания компонентов и выражений JavaScript.

JSX Выражения

Вы можете определить локальные переменные JavaScript внутри скрипта компонента frontmatter между двумя блоками кода ( --- ) компонента Astro. Затем вы можете вставить эти переменные в HTML-шаблон компонента, используя JSX выражения!

Переменные

Локальные переменные можно добавить в HTML с помощью синтаксиса фигурных скобок:

---
const name = "Astro";
---
<div>
  <h1>Hello {name}!</h1>  <!-- Outputs <h1>Hello Astro!</h1> -->
</div>

Динамические атрибуты

Локальные переменные можно использовать в фигурных скобках для передачи значений атрибутов как элементам HTML, так и компонентам:

---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>

<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

Атрибуты HTML будут преобразованы в строки, поэтому передать функции и объекты элементам HTML невозможно. Например, вы не можете назначить обработчик события элементу HTML в компоненте Astro:

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ Это не работает! ❌ -->
<button onClick={handleClick}>Nothing will happen when you click me!</button>

Вместо этого используйте клиентский скрипт для добавления обработчика событий, как вы бы делали в обычном JavaScript:

---
---
<button id="button">Click Me</button>
<script>
  function handleClick () {
    console.log("button clicked!");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

Динамический HTML

Локальные переменные можно использовать в JSX-подобных функциях для создания динамически генерируемых HTML-элементов:

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Astro поддерживает условное отображение HTML с использованием логических операторов и тернарных выражений JSX:

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

Динамические HTML теги

Вы также можете использовать динамические теги, установив переменную на имя HTML-тега или импорта компонента:

---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- отображается как <div>Hello!</div> -->
<Component /> <!-- отображается как <MyComponent /> -->

При использовании динамических тегов:

Имена переменных должны быть написаны с заглавной буквы. Например, используйте Element, а не element. В противном случае Astro попытается отобразить имя переменной как HTML-тег.
Директивы для гидрации не поддерживаются. При использовании client:*директив гидрации, Astro необходимо знать, какие компоненты добавлять в production сборку, а подобный паттерн препятствует корректной работе сборщика.

Фрагменты

Astro поддерживает использование как <Fragment> </Fragment>, так и краткой записи <> </>.

Фрагменты могут быть полезны, чтобы избежать оберточных элементов при добавлении директив set:*, как в следующем примере:

---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />

Отличия между Astro и JSX

Синтаксис компонентов Astro - это надмножество HTML. Он был разработан так, чтобы казаться знакомым любому, кто имеет опыт работы с HTML или JSX, но есть несколько ключевых различий между файлами .astro и JSX.

Атрибуты

В Astro вы используете стандартный формат kebab-case для всех HTML атрибутов вместо camelCase из JSX. Это работает, в том числе, для class атрибута, который не поддерживается в React.

<div className="box" dataValue="3" />
<div class="box" data-value="3" />

Множественные элементы

Шаблон Astro компонента может выводить множество элементов без необходимости оборачивать их все в единственный элемент, например div или <>, как делается в JavaScript или JSX.

---
// Шаблон с множественными элементами
---
<p>Нет необходимости оборачивать элементы в одиночную обёртку.</p>
<p>Astro поддерживает множественные корневые элементы в шаблоне.</p>