Острова и компоненты React

Остров — интерактивный компонент на статической странице. Astro позволяет писать такие компоненты на React, Vue, Svelte, Preact или Solid. По умолчанию даже React-компонент превращается в чистый HTML без JavaScript; чтобы он заработал в браузере, ему дают директиву client:*.

Подключение React

Поддержку React добавляет интеграция:

npx astro add react

Команда установит @astrojs/react, react и react-dom, добавит react() в integrations в astro.config.mjs и настроит JSX в tsconfig.json. Для Vue и Svelte команды такие же: npx astro add vue, npx astro add svelte.

React-компонент

Создайте src/components/LikeButton.jsx — обычный компонент React с состоянием:

// src/components/LikeButton.jsx
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  return (
    <button onClick={() => setLikes(likes + 1)}>
      Нравится: {likes}
    </button>
  );
}

Внутри файлов .jsx действуют правила React, а не Astro: className, onClick, хуки.

Вставка на страницу

Импортируйте компонент в страницу статьи src/pages/posts/[id].astro и поставьте под текстом:

---
import LikeButton from '../../components/LikeButton.jsx';
// ...остальной фронтматтер из урока о динамических маршрутах
---
 
<BaseLayout title={post.data.title}>
  <h1>{post.data.title}</h1>
  <Content />
  <LikeButton client:load />
</BaseLayout>

Откройте любую статью: под текстом кнопка «Нравится: 0», и каждый клик увеличивает число. Директива client:load говорит Astro отправить в браузер код компонента и React и «оживить» кнопку сразу после загрузки страницы. Этот процесс называют гидратацией.

Без директивы

Уберите client:load и обновите страницу. Кнопка останется на месте, но клики ничего не меняют: Astro выполнил компонент при сборке и отдал только HTML. Так удобно использовать готовые React-компоненты для неинтерактивных частей — например, вёрстку карточки — без лишнего JavaScript.

Пропсы острова

Остров принимает пропсы так же, как компонент Astro: <LikeButton client:load initial={5} />. Значения передаются в браузер, поэтому годятся только простые данные: строки, числа, массивы, объекты, даты. Функцию передать нельзя.

Частая ошибка

Пытаются использовать хук useState прямо в компоненте .astro. Хуки — часть React и работают только в файлах .jsx и .tsx. Состояние в браузере держит остров, а .astro отвечает за разметку вокруг него.