2021-06-28 15:46:10 +00:00
|
|
|
# Using Preact with Astro
|
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
This example showcases Astro's built-in support for [Preact](https://www.preactjs.com/).
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
### Automatic
|
|
|
|
|
|
|
|
Bootstrap your Astro project with this template!
|
|
|
|
|
|
|
|
```shell
|
2021-07-21 01:06:11 +00:00
|
|
|
npm init astro -- --template framework-preact
|
2021-07-01 12:43:25 +00:00
|
|
|
```
|
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
### Manual
|
|
|
|
|
|
|
|
To use Preact components in your Astro project:
|
|
|
|
|
|
|
|
1. Install `@astrojs/renderer-preact`
|
|
|
|
|
|
|
|
```shell
|
|
|
|
npm i @astrojs/renderer-preact
|
|
|
|
```
|
|
|
|
|
|
|
|
2. Add `"@astrojs/renderer-preact"` to your `renderers` in `astro.config.mjs`.
|
|
|
|
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
renderers: [
|
|
|
|
"@astrojs/renderer-preact",
|
|
|
|
// optionally, others...
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
2021-06-28 15:46:10 +00:00
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
## Usage
|
2021-06-28 15:46:10 +00:00
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
Write your Preact components as `.jsx` or `.tsx` files in your project.
|