Пропустить до содержимого

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

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

Приготовьтесь к...

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

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

Раздел, озаглавленный Добавьте Preact в ваш проект Astro

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

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

    Terminal window
    npx astro add preact

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

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

Раздел, озаглавленный Включите приветственный баннер Preact

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

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

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

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

    src/components/Greeting.jsx
    import { h } from 'preact';
    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 = "Home Page";
    ---
    <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 на клиент?

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

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

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

Раздел, озаглавленный Проверьте свои знания

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

  1. <ReactCounter client:load/>

  2. <SvelteCard />

Чек-лист

Раздел, озаглавленный Чек-лист

Ресурсы

Раздел, озаглавленный Ресурсы