Astro 1.0 добавляет компоненты React

Я написал свою долю статей об Astro в прошлом, но некоторые вещи изменились после выхода Astro 1.0.

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

В этой статье мы рассмотрим запуск компонентов React в Astro. (Старый способ добавления React в Astro)

Добавление React в Astro

Давайте воспользуемся минимальным стартовым пакетом Astro. Это самый простой в использовании пакет, так как он чистый.

mkdir astro-react && cd astro-react
Вход в полноэкранный режим Выйдите из полноэкранного режима

После того как вы установили папку, можно установить минимальный стартовый пакет.

npm init astro -- --template minimal
Войти в полноэкранный режим Выйти из полноэкранного режима

После установки у нас будет запущен наш супер базовый Astro. Давайте продолжим и добавим React rendered.

npm run astro add react
Войти в полноэкранный режим Выйти из полноэкранного режима

Это добавит React, рендеринг и необходимые настройки в конфигурационный файл Astro.

Если вы откроете этот файл astro.config.mjs, вы увидите следующее.

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь давайте продолжим и создадим новый компонент: src/components/React.jsx.

import { useState } from 'react';

export default function React() {
  const [counter, setCounter] = useState(0);
  const name = 'React';

  return (
    <div>
      <button onClick={() => setCounter((i) => i - 1)}>-</button>
      <pre>{counter}</pre>
      <button onClick={() => setCounter((i) => i + 1)}>+</button>
      <p>I'm a {name} component</p>
    </div>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь перейдите к файлу src/pages/index.astro и импортируйте этот компонент.

---
import React from '../components/React.jsx';
---
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <React />
    </body>
</html>
Войдите в полноэкранный режим Выход из полноэкранного режима

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

Однако счетчик ничего не делает.

Как же заставить счетчик работать?
Нам придется использовать директиву hydration для компонента.

Если вы хотите узнать больше о клиентских директивах, то в документации Astro вы найдете все, что нужно!

Для примера мы можем использовать любую из них, но idle или load имеют наибольший смысл для этого конкретного компонента.

Готовый код примера вы можете найти на GitHub.

Спасибо, что прочитали, и давайте подключаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться на Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий