Use a Preact component to greet your visitors with a randomly-selected welcome message!
Get ready to…
- Add Preact to your Astro project
- Include Astro islands (Preact
.jsxcomponents) on your home page
client:directives to make islands interactive
Add Preact to your Astro projectSection titled Add Preact to your Astro project
If it’s running, quit the dev server to have access to the terminal (keyboard shortcut: Ctrl + C).
Add the ability to use Preact components in your Astro project with a single command:
Follow the command line instructions to confirm adding Preact to your project.
Include a Preact greeting bannerSection titled 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.
Create a new file in
.jsxfile extension. This file will be written in Preact, not Astro.
Add the following code to
Import and use this component on your Home page
Check the preview in your browser: you should see a random greeting, but the button won’t work!
Add a second
<Greeting />component with the
Revisit your page and compare the two components. The second button works because the
Once the difference is clear, remove the non-hydrated Greeting component.
Analyze the PatternSection titled Analyze the Pattern
There are other
Consider an Astro component with the following code:
In what way(s) will the two
<PreactBanner />components be the same? In what way(s) will they be different?
SvelteCountercomponent shows a number and has a button to increase it. If you couldn’t see your website’s code, only the live published page, how would you tell which of the two
<SvelteCounter />components used
Test your knowledgeSection titled Test your knowledge
For each of the following components, identify what will be sent to the browser: