Синтаксис Astro

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

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

JSX Выражения

Заголовок раздела JSX Выражения

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

Динамичекие vs реактивные

Используя этот подход, вы можете использовать динамические значения, которые расчитываются внутри frontmatter. Но после использования в шаблоне, эти значения не становятся реактивными и не будут изменены никогда. Astro компоненты - это шаблоны, которые исполняются единожды, в фазе рендеринга.

Ниже представлены примеры отличий между Astro и JSX.

Переменные

Заголовок раздела Переменные

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

src/components/Variables.astro

---
const name = "Astro";
---
<div>
  <h1>Привет, {name}!</h1>  <!-- Вывод: <h1>Привет, Astro!</h1> -->
</div>

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

Заголовок раздела Динамические атрибуты

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

src/components/DynamicAttributes.astro

---
const name = "Astro";
---
<h1 class={name}>Атрибутные выражения поддерживаются</h1>

<MyComponent templateLiteralNameAttribute={`Значение-${name}`} />

Осторожно

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

dont-do-this.astro

---
function handleClick() {
    console.log("Клик!");
}
---
<!-- ❌ Работать не будет! ❌ -->
<button onClick={handleClick}>Ничего не произойдет при клике!</button>

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

do-this-instead.astro

<button id="button">Click Me</button>
<!-- ✅ Сработает как ожидается! ✅ -->
<script>
  function handleClick() {
    console.log("Клик!");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

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

Заголовок раздела Динамический HTML

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

src/components/DynamicHtml.astro

---
const items = ["Пёс", "Кот", "Утконос"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

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

src/components/ConditionalHtml.astro

---
const visible = true;
---
{visible && <p>Покажи меня!</p>}

{visible ? <p>Покажи меня!</p> : <p>Или меня!</p>}

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

Заголовок раздела Динамические HTML теги

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

src/components/DynamicTags.astro

---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Привет!</Element> <!-- выведется как <div>Привет!</div> -->
<Component /> <!-- выведется как <MyComponent /> -->

Как используются динамические теги:

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

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

Фрагменты

Заголовок раздела Фрагменты

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

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

src/components/SetHtml.astro

---
const htmlString = '<p>HTML контент</p>';
---
<Fragment set:html={htmlString} />

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

Заголовок раздела Отличия между Astro и JSX

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

Атрибуты

Заголовок раздела Атрибуты

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

example.astro

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

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

Заголовок раздела Множественные корневые элементы

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

src/components/RootElements.astro

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

Комментарии

Заголовок раздела Комментарии

В Astro вы можете использовать стандартные HTML или JavaScript-подобный синтаксисы.

example.astro

---
---
<!-- Синтаксис HTML комментариев валиден в .astro файлах -->
{/* Синтаксис JS комментариев тоже валиден */}

Осторожно

HTML-подобные комментарии будут включены в DOM браузера, в отличии от JS комментариев, которые будут удалены. Для того, чтобы оставить TODO сообщения или другие пояснения для разработчиков, вы, скорее всего, пожелаете использовать JavaScript-подобные комментарии.