In this section we will install ReactJS in Astro. Astro is an all-in-one web framework for building fast, content-focused websites. Astro also support reactjs. For UI we will use Tailwind CSS because astro easily integrate Tailwind CSS.
Tools Use
Astro
Tailwind CSS (@astrojs/tailwind)
React (@astrojs/react)
Create Astro Project
Create Astro with the Automatic CLI.
# npm
npm create astro@latest
# yarn
yarn create astro
# pnpm
pnpm create astro@latest
Give project name and select astro template.
โ Where would you like to create your new project? โฆ astro-react
? Which template would you like to use? โบ - Use arrow-keys. Return to submit.
Just the basics (recommended)
Blog
Portfolio
Documentation Site
โฏ Empty project
install npm dependencies.
โ Would you like to install npm dependencies? (recommended) โฆ yes
Select typescript.
? How would you like to setup TypeScript? โบ - Use arrow-keys. Return to submit.
โฏ Relaxed
Strict (recommended) - Enable `strict` typechecking rules
Strictest
I prefer not to use TypeScript
Move to project.
cd astro-react
Install Tailwind CSS in Astro
install tailwind css in astro using @astrojs/tailwind
# Using NPM
npm run astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind
Install React JS in Astro
install react in astro using @astrojs/react.
# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpm astro add react
Use React in Astro
In Astro using react is very simple. you need just need to create react jsx components and import astro file.
Counter App in Astro with React
First you need to create components folder and create Counter.jsx
components/Counter.jsx
Create react counter using useState hook in astro.
src/components/Counter.jsx
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div className="flex items-center justify-center gap-x-12">
<button onClick={() => setCount((count) => count + 1)} className="px-4 py-2 text-white bg-indigo-600 rounded-md">
Increment
button>
<p>{count}p>
<button onClick={() => setCount((count) => count - 1)} className="px-4 py-2 text-white bg-red-600 rounded-md">
Decrement
button>
div>
);
}
Import React counter component in astro file.
src/pages/index.astro
---
import Counter from '../components/Counter.jsx';
---
lang="en">
charset="utf-8" />
rel="icon" type="image/svg+xml" href="https://dev.to/favicon.svg" />
name="viewport" content="width=device-width" />
name="generator" content={Astro.generator} />
</span>Astro with React<span class="nt">
class="flex flex-col items-center justify-center h-screen">
class="mb-2 text-2xl text-yellow-700">Install ReactJS in Astro with Tailwind CSS
client:load />