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