搭建你的第一个 Astro 岛屿

使用一个 Preact 组件来随机选择欢迎消息来欢迎访问者！

Get ready to…

• 在你的 Astro 项目中添加 Preact
• 在主页上包含 Astro 岛屿（Preact .jsx 组件）
• 使用 client: 指令使岛屿可交互

在你的 Astro 项目中添加 Preact

段落标题 在你的 Astro 项目中添加 Preact

1. 如果运行着 Astro 开发服务器，请退出以便使用终端（快捷键：Ctrl + C）。

2. 通过以下单个命令，为你的 Astro 项目添加使用 Preact 组件的能力：

   npm

   npx astro add preact

   pnpm

   pnpm astro add preact

   Yarn

   yarn astro add preact

3. 按照命令行提示的说明来确认添加 Preact 到你的项目。

添加一个 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}! Thank you for visiting!</h3>
         <button onClick={() => setGreeting(randomMessage())}>
           New Greeting
         </button>
       </div>
     );
   }

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

   src/pages/index.astro

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

5. 查看你的页面并比较这两个组件。第二个按钮可工作，因为 client:load 指令告诉 Astro 在页面加载时将其 JavaScript 发送并重新运行到客户端上，使组件可交互。这称为 被 Hydrate 的 组件。

6. 一旦明确区别后，删除未被 Hydrate 的 Greeting 组件。

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "首页";
   ---
   <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>

1. 五个组件中哪些将成为被 Hydrate 的岛屿，将其 JavaScript 发送到客户端？

   <PreactBanner client:load /> 和 <SvelteCounter client:visible /> 将成为被 Hydrate 的岛屿。

2. 两个 <PreactBanner /> 组件在哪些方面相同？在哪些方面不同？

   相同：它们都显示相同的 HTML 元素，并且初始外观相同。不同：具有 client:load 指令的组件会在页面加载后重新渲染，并且任何交互元素都将起作用。

3. 假设 SvelteCounter 组件显示一个数字，并带有一个增加数字的按钮。如果你无法看到网站的代码，只能看到发布后的页面，你如何判断哪个 <SvelteCounter /> 组件使用了 client:visible？

   尝试点击按钮，看看哪个是可交互的。如果它对你的输入有响应，那么它肯定使用了 client: 指令。

检验你的知识

段落标题 检验你的知识

对于以下每个组件，确定将发送到浏览器的内容：

1. <ReactCounter client:load />

   1. 仅 HTML 和 CSS

   2. HTML、CSS 和 JavaScript

   Submit

2. <SvelteCard />

   1. 仅 HTML 和 CSS

   2. HTML、CSS 和 JavaScript

   Submit

任务清单

段落标题 任务清单

• 我可以安装 Astro 集成。
• 我可以用它们各自的语言编写 UI 框架组件。
• 我可以在 UI 框架组件上使用 client: 指令进行 hydrate。

相关资源

段落标题 相关资源

• Astro 集成指南
• 在 Astro 中使用 UI 框架组件
• Astro client 指令参考