构建你的第一个 Astro 岛

使用 Preact 组件通过随机选择的欢迎消息来迎接你的访客！

¥Use a Preact component to greet your visitors with a randomly-selected welcome message!

准备好……

• 将 Preact 添加到你的 Astro 项目

• 在你的主页上包含 Astro 岛（Preact .jsx 组件）

• 使用 client: 指令使群岛具有交互性

将 Preact 添加到你的 Astro 项目

标题部分 将 Preact 添加到你的 Astro 项目

¥Add Preact to your Astro project

1. If it’s running, quit the dev server to have access to the terminal (keyboard shortcut: Ctrl + C).

2. Add the ability to use Preact components in your Astro project with a single command:

   npm

   npx astro add preact

   pnpm

   pnpm astro add preact

   Yarn

   yarn astro add preact

3. Follow the command line instructions to confirm adding Preact to your project.

包含 Preact 问候横幅

标题部分 包含 Preact 问候横幅

¥Include a Preact greeting banner

该组件将采用一组问候消息作为属性，并随机选择其中一条作为欢迎消息显示。用户可以单击按钮来获取新的随机消息。

¥This component will take an array of greeting messages as a prop and randomly select one of them to show as a welcome message. The user can click a button to get a new random message.

1. Create a new file in src/components/ named Greeting.jsx

   Note the .jsx file extension. This file will be written in Preact, not Astro.

2. Add the following code to 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. Import and use this component on your Home page index.astro.

   src/pages/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>

   Check the preview in your browser: you should see a random greeting, but the button won’t work!

4. Add a second <Greeting /> component with the client:load directive.

   src/pages/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"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

5. Revisit your page and compare the two components. The second button works because the client:load directive tells Astro to send and rerun its JavaScript on the client when the page loads, making the component interactive. This is called a hydrated component.

6. Once the difference is clear, remove the non-hydrated Greeting component.

   src/pages/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"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

分析模式

标题部分 分析模式

¥Analyze the Pattern

还有其他 client: 指令需要探索。每个都在不同的时间将 JavaScript 发送到客户端。例如，client:visible 仅当组件在页面上可见时才发送该组件的 JavaScript。

¥There are other client: directives to explore. Each sends the JavaScript to the client at a different time. client:visible, for example, will only send the component’s JavaScript when it is visible on the page.

考虑具有以下代码的 Astro 组件：

¥Consider an Astro component with the following code:

---
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 /> and <SvelteCounter client:visible /> will be hydrated islands.

2. 两个 <PreactBanner /> 组件在哪些方面相同？它们会在哪些方面有所不同？

   Same: They both show the same HTML elements and look the same initially. Different: The component with the client:load directive will rerender after the page is loaded, and any interactive elements that it has will work.

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

   Try clicking the button, and see which one is interactive. If it responds to your input, it must have had a client: directive.

测试你的知识

标题部分 测试你的知识

¥Test your knowledge

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

¥For each of the following components, identify what will be sent to the browser:

1. <ReactCounter client:load />

1. HTML and CSS only

2. HTML, CSS, and JavaScript

提交

2. <SvelteCard />

1. HTML and CSS only

2. HTML, CSS, and JavaScript

提交

清单

标题部分 清单

¥Checklist

• 我可以安装 Astro 集成。

• 我可以用自己的语言编写 UI 框架组件。

• 我可以使用 client: 指令对我的 UI 框架组件进行水化。

资源

标题部分 资源

¥Resources

• Astro 集成指南

• 在 Astro 中使用 UI 框架组件

• Astro 客户端指令参考