How to install React on Symfony 7

February 13, 2024

Software Development, Symfony

0

WINW > Software Development > Symfony > How to install React on Symfony 7

To install React on Symfony 7 and Twig, you can follow these steps:

1. Install Symfony UX React Bundle: This bundle integrates React in Symfony applications ¹. You can install it using Composer and Symfony Flex:

composer require symfony/ux-react

The Flex recipe will automatically set things up for you, like adding .enableReactPreset() to your webpack.config.js file and adding code to load your React components inside assets/app.js¹.

2. Install a package to help React¹:

npm install -D @babel/preset-react --force
npm run watch

or if you are using yarn:

yarn add @babel/preset-react --dev --force
yarn watch

3. Enable React in your webpack.config.js²:

// webpack.config.js
//...
Encore
//...
.enableReactPreset();

4. Create React Components: Any files inside assets/react/controllers/ can now be rendered as React components ¹.

5. Render React Components in Twig: You can render any React controller component in Twig using the react_component()¹.