# Astro 1.0 adding React components
I've written my fair share of [Astro articles](https://daily-dev-tips.com/tags/astro/) in the past, but some things have changed since the release of Astro 1.0.
I decided it's best to re-look at some previous articles to explore the new way of doing things in Astro.
In this article, we'll be looking at running React components in Astro. ([the old way of adding React in Astro](https://daily-dev-tips.com/posts/using-react-components-in-astro-for-better-loading/))
## Adding React to Astro
Let's use the minimal started pack from Astro. This is the easiest to use as it's clean.
```bash
mkdir astro-react && cd astro-react
```
Once you have your folder installed, you can install the minimal starter.
```bash
npm init astro -- --template minimal
```
Once installed, we'll have our super basic Astro started. Let's go ahead and add the React rendered.
```bash
npm run astro add react
```
This will add React and the rendered and the needed config to your Astro config file.
You should see the following if you open up this `astro.config.mjs` file.
```js
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
});
```
Now let's go ahead and create a new component: `src/components/React.jsx`.
```js
import { useState } from 'react';
export default function React() {
const [counter, setCounter] = useState(0);
const name = 'React';
return (
{counter}
I'm a {name} component
);
}
```
Now head over to your `src/pages/index.astro` file and import this component.
```js
---
import React from '../components/React.jsx';
---
Astro
```
If we run our application, you'll see that the component is rendered and our variable name is set.
However, the counter won't do anything.
So how can we get this counter to work?
We'll have to use a hydration directive on the component.
- ``: Plain HTML version get's rendered
- ``: Renders the component on page load
- ``: Renders when the browser is done with the initial load
- ``: Renders once the component is scrolled into view
- ``: Renders when the media query is applicable
- ``: Only renders the component client side, not on the server
Want to know more about client directives, the [Astro docs have you covered](https://docs.astro.build/en/reference/directives-reference/#client-directives)!
For the example, we can use either one, but `idle` or `load` make the most sense for this specific component.
You can find the completed sample code on [GitHub](https://github.com/rebelchris/astro-react).
### Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)