Создайте свой первый островок Astro

Используйте компонент Preact для приветствия ваших посетителей случайно выбранным сообщением!

Приготовьтесь…

• Добавить Preact в ваш проект Astro
• Включить островки Astro (компоненты Preact .jsx) на вашей домашней странице
• Использовать директивы client: чтобы сделать островки интерактивными

Добавьте Preact в ваш проект Astro

1. Если сервер разработки работает, остановите его, чтобы получить доступ к терминалу (сочетание клавиш: Ctrl + C).

2. Добавьте возможность использования компонентов Preact в вашем проекте Astro одной командой:

   npm

   npx astro add preact

   pnpm

   pnpm astro add preact

   Yarn

   yarn astro add preact

3. Следуйте инструкциям командной строки, чтобы подтвердить добавление Preact в ваш проект.

Включите приветственный баннер Preact

Этот компонент будет принимать массив приветственных сообщений в качестве свойства и случайно выбирать одно из них для отображения в качестве приветствия. Пользователь может нажать кнопку, чтобы получить новое случайное сообщение.

1. Создайте новый файл в src/components/ под названием Greeting.jsx

   Обратите внимание на расширение файла .jsx. Этот файл будет написан на Preact, а не на Astro.

2. Добавьте следующий код в Greeting.jsx:

   src/components/Greeting.jsx

   import { useState } from 'preact/hooks';
   
   export default function Greeting({messages}) {
   
     const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
   
     const [greeting, setGreeting] = useState(messages[0]);
   
     return (
       <div>
         <h3>{greeting}! Спасибо за ваш визит!</h3>
         <button onClick={() => setGreeting(randomMessage())}>
           Новое приветствие
         </button>
       </div>
     );
   }

3. Импортируйте и используйте этот компонент на вашей домашней странице index.astro.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting.jsx';
   const pageTitle = "Главная";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Мой потрясающий подзаголовок блога</h2>
     <Greeting messages={["Привет", "Здравствуйте", "Приветствую", "Эй, привет"]} />
   </BaseLayout>

   Проверьте предпросмотр в вашем браузере: вы должны увидеть случайное приветствие, но кнопка не будет работать!

4. Добавьте второй компонент <Greeting /> с директивой client:load.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Главная";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Мой потрясающий подзаголовок блога</h2>
     <Greeting messages={["Привет", "Здравствуйте", "Приветствую", "Эй, привет"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

5. Вернитесь на свою страницу и сравните два компонента. Вторая кнопка работает, потому что директива client:load говорит Astro отправить и перезапустить свой JavaScript на клиенте, когда страница загружается, делая компонент интерактивным. Мы называем это гидратированным компонентом.

6. Как только разница станет понятна, уберите негидратированный компонент Greeting.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Главная";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Мой потрясающий подзаголовок блога</h2>
     <Greeting messages={["Привет", "Здравствуйте", "Приветствую", "Эй, привет"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

Проанализируйте шаблон

Существуют и другие директивы client:, которые можно изучить. Каждая из них отправляет JavaScript на клиент в разное время. client:visible, например, отправит JavaScript компонента только тогда, когда он будет виден на странице.

Рассмотрим компонент Astro со следующим кодом:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import AstroBanner from '../components/AstroBanner.astro';
import PreactBanner from '../components/PreactBanner';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<BaseLayout>
  <AstroBanner />
  <PreactBanner />
  <PreactBanner client:load />
  <SvelteCounter />
  <SvelteCounter client:visible />
</BaseLayout>

1. Какие из пяти компонентов будут гидратированными островками, отправляющими JavaScript на клиент?

   <PreactBanner client:load /> и <SvelteCounter client:visible /> будут гидратированными островками.

2. В чём <PreactBanner /> компоненты будут похожи? В чём они будут отличаться?

   Похожи: оба показывают одинаковые HTML-элементы и изначально выглядят одинаково. Отличаются: компонент с директивой client:load будет перерисовываться после загрузки страницы, и любые интерактивные элементы, которые он содержит, будут работать.

3. Предположим, компонент SvelteCounter отображает число и имеет кнопку для его увеличения. Если бы вы не могли видеть код вашего сайта, а только опубликованную страницу, как бы вы определили, какой из двух компонентов <SvelteCounter /> использует client:visible?

   Попробуйте нажать на кнопку и посмотрите, какой из них интерактивен. Если он реагирует на ваш ввод, значит, он использует директиву client:.

Проверьте свои знания

Для каждого из следующих компонентов определите, что будет отправлено в браузер:

1. <ReactCounter client:load />

   1. Только HTML и CSS

   2. HTML, CSS и JavaScript

   Отправить

2. <SvelteCard />

   1. Только HTML и CSS

   2. HTML, CSS и JavaScript

   Отправить

Контрольный список

• Я умею устанавливать интеграции Astro.
• Я умею писать компоненты UI-фреймворка на их собственном языке.
• Я умею использовать директиву client: для гидратации моего компонента UI-фреймворка.

Ресурсы

• Руководство по интеграции Astro (EN)

• Использование компонентов UI-фреймворка в Astro (EN)

• Справочник по директивам клиента Astro (EN)