搭建你的第一个 Astro 岛屿

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

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

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

   npx astro add preact

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

这个组件将接受一个欢迎消息的数组作为属性，并随机选择其中一条消息作为欢迎消息展示给用户。用户可以点击按钮获取新的随机消息。

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

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

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

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

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

   在浏览器中预览：你应该看到一个随机的问候，但按钮不起作用！

4. 添加第二个 <Greeting /> 组件，并加上 client:load 指令。

   ---
   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 组件。

   ---
   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>

---
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>

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