# How to add React support in Sage 11

**URL:** https://discourse.roots.io/t/how-to-add-react-support-in-sage-11/29557
**Category:** sage
**Tags:** sage11
**Created:** 2025-04-29T11:56:37Z
**Posts:** 8
**Showing post:** 5 of 8

## Post 5 by @Er_Suraj — 2025-05-03T07:53:51Z

Hi again,

Thanks for the suggestion. I have summarized the setup in the below mentioned steps. Please look into those and suggest if I missed something.

## Step1: Install Sage 11

Navigate to the theme directory of your WordPress Installation and run the command given below to install sage 11

```
composer create-project roots/sage your-theme-name
```

## Step2: Install `npm` dependencies

After installing sage navigate to the theme and open the theme on your preferred IDE. Then run the command given below:

```
npm install
npm run build
```

## Step3: Install react setup

Run the **`@vitejs/plugin-react`** plugin and also install `react` and `react-dom`. To do the same run the commands given below:

```
npm i @vitejs/plugin-react
```

```
npm i react react-dom
```

After installing **`@vitejs/plugin-react`** inside `vite.config.js` please add it as given below:

```
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})
```

## Step4: Other Configurations

- Rename`app.js` to `app.jsx` as well as updating references to it in `app.blade.php`.
- Inside `app.blade.php`  
Update the line below:

```
@vite(['resources/css/app.css', 'resources/js/app.jsx'])
```

- Before the above mentioned line, please add:

```
@viteReactRefresh
```

- In `vite.config.js`  
Update the base path here: `base: '/app/themes/sage11/public/build/'` pointing to your theme

## Step5: Start dev server

`npm run dev`

---

_[View the full topic](https://discourse.roots.io/t/how-to-add-react-support-in-sage-11/29557)._