构建你的第一个 Astro Island

使用 Preact 组件，用随机选择的欢迎消息来问候你的访客！

准备好去…

将 Preact 添加到你的 Astro 项目
在你的主页上添加 Astro 岛屿（Preact .jsx 组件）
使用 client: 指令使岛屿具有交互性

将 Preact 添加到你的 Astro 项目

如果开发服务器正在运行，请退出它以便访问终端（键盘快捷键：Ctrl + C）。
用一个命令为你的 Astro 项目添加使用 Preact 组件的能力
- npm
- pnpm
- Yarn
终端窗口
npx astro add preact
终端窗口
pnpm astro add preact
终端窗口
yarn astro add preact
按照命令行说明确认将 Preact 添加到你的项目中。

这个组件将接收一个问候语数组作为 prop，并随机选择其中一个作为欢迎语显示。用户可以点击一个按钮来获取一个新的随机消息。

在 src/components/ 目录下创建一个名为 Greeting.jsx 的新文件

注意 .jsx 文件扩展名。这个文件将用 Preact 编写，而不是 Astro。

将以下代码添加到 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}! Thank you for visiting!</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        New Greeting
      </button>
    </div>
  );
}

在你的主页 index.astro 上导入并使用这个组件。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
</BaseLayout>

在浏览器中检查预览：你应该会看到一个随机的问候语，但按钮不会工作！

添加第二个带有 client:load 指令的 <Greeting /> 组件。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

重新访问你的页面并比较这两个组件。第二个按钮可以工作，因为 client:load 指令告诉 Astro 在页面加载时，在客户端上发送并重新运行其 JavaScript，从而使组件具有交互性。这被称为注水组件。

一旦清楚地看到了区别，就移除未被注水的 Greeting 组件。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <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>

这五个组件中，哪一个会是被注水的岛屿，将 JavaScript 发送到客户端？

<PreactBanner client:load /> 和 <SvelteCounter client:visible /> 将是注水岛屿。
这两个 <PreactBanner /> 组件在哪些方面相同？又在哪些方面不同？

相同：它们都显示相同的 HTML 元素，并且初始外观相同。不同：带有 client:load 指令的组件将在页面加载后重新渲染，并且其任何交互式元素都将正常工作。
假设 SvelteCounter 组件显示一个数字并有一个按钮来增加它。如果你看不到网站的代码，只能看到实时发布的页面，你将如何判断这两个 <SvelteCounter /> 组件中哪一个使用了 client:visible？

尝试点击按钮，看看哪一个是交互式的。如果它响应你的输入，那么它一定带有一个 client: 指令。

知识测验

对于以下每个组件，请指出将发送到浏览器的是什么

<ReactCounter client:load />
1. 仅 HTML 和 CSS
2. HTML、CSS 和 JavaScript
<SvelteCard />
1. 仅 HTML 和 CSS
2. HTML、CSS 和 JavaScript

清单

我能够安装 Astro 集成。
我能够用其各自的语言编写 UI 框架组件。
我能够在我 UI 框架组件上使用 client: 指令进行注水。