Professional Documents
Culture Documents
React
React
React
type: integration
title: '@astrojs/react'
description: Learn how to use the @astrojs/react framework integration to extend
component support in your Astro project.
githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/
react/'
hasREADME: true
category: renderer
i18nReady: true
---
<DontEditWarning/>
## Installation
There are two ways to add integrations to your project. Let's try the most
convenient option first!
Astro includes a CLI tool for adding first party integrations: `astro add`. This
command will:
To install `@astrojs/react`, run the following from your project directory and
follow the prompts:
```sh
# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpm astro add react
```
```sh
npm install @astrojs/react
```
Most package managers will install associated peer dependencies as well. Still, if
you see a "Cannot find package 'react'" (or similar) warning when you start up
Astro, you'll need to install `react` and `react-dom`:
```sh
npm install react react-dom
```
Now, apply this integration to your `astro.config.*` file using the `integrations`
property:
## Getting started
To use your first React component in Astro, head to our [UI framework
documentation][astro-ui-frameworks]. You'll explore:
## Options
When you are using multiple JSX frameworks (React, Preact, Solid) in the same
project, Astro needs to determine which JSX framework-specific transformations
should be used for each of your components. If you have only added one JSX
framework integration to your project, no extra configuration is needed.
```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
Children passed into a React component from an Astro component are parsed as plain
strings, not React nodes.
For example, the `<ReactComponent />` below will only receive a single child
element:
```astro
---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
<div>one</div>
<div>two</div>
</ReactComponent>
```
If you are using a library that *expects* more than one child element to be passed,
for example so that it can slot certain elements in different places, you might
find this to be a blocker.
You can enable this option in the configuration for the React integration:
```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
## Troubleshooting
## Contributing
This package is maintained by Astro's Core team. You're welcome to submit an issue
or PR!
[astro-integration]: /en/guides/integrations-guide/
[astro-ui-frameworks]: /en/core-concepts/framework-components/#using-framework-
components