跳转到内容

搭建你的第一个 Astro 岛屿

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

准备好…

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

在你的 Astro 项目中添加 Preact

段落标题 在你的 Astro 项目中添加 Preact
  1. 如果运行着 Astro 开发服务器,请退出以便使用终端(快捷键:Ctrl + C)。

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

    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 { 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 发送到客户端?

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

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

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

  1. <ReactCounter client:load />

  2. <SvelteCard />

贡献

你有什么想法?

社区