diff options
Diffstat (limited to 'examples/framework-react/README.md')
| -rw-r--r-- | examples/framework-react/README.md | 35 |
1 files changed, 31 insertions, 4 deletions
diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md index dd82a447f..3701554be 100644 --- a/examples/framework-react/README.md +++ b/examples/framework-react/README.md @@ -1,11 +1,38 @@ # Using React with Astro -``` +This example showcases Astro's built-in support for [React](https://reactjs.org/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-react ``` -This example showcases Astro's built-in support for [React](https://reactjs.org/). +### 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... + ] + } + ``` -No configuration is needed to enable React support—just start writing React components in `src/components`. +## Usage -> **Note**: If used, components _must_ include the JSX factory (ex. `import React from "react"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. +Write your React components as `.jsx` or `.tsx` files in your project. |