Symfony UX React
Edit this pageSymfony UX React
Symfony UX React is a Symfony bundle integrating React in Symfony applications. It is part of the Symfony UX initiative.
React is a JavaScript library for building user interfaces. Symfony UX React provides tools to render React components from Twig, handling rendering and data transfers.
Symfony UX React supports React 18+.
Installation
Before you start, make sure you have Symfony UX configured in your app. Then install the bundle using Composer and Symfony Flex:
1
$ composer require symfony/ux-react
Next, in webpack.config.js
, enable React support:
1 2 3 4 5 6 7
// webpack.config.js
// ...
Encore
// ...
.enableReactPreset()
;
Install a package to help React:
1 2 3 4 5 6 7
$ npm install -D @babel/preset-react --force
$ npm run watch
# or use yarn
$ yarn add @babel/preset-react --dev --force
$ yarn watch
Finally, to load your React components, add the following lines to assets/app.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13
// assets/app.js
import { registerReactControllerComponents } from '@symfony/ux-react';
// Registers React controller components to allow loading them from Twig
//
// React controller components are components that are meant to be rendered
// from Twig. These component then rely on other components that won't be called
// directly from Twig.
//
// By putting only controller components in `react/controllers`, you ensure that
// internal components won't be automatically included in your JS built file if
// they are not necessary.
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
That's it! Create an `assets/react/controllers/` directory and start creating your React components.
Usage
UX React works by using a system of React controller components: React components that
are registered using registerReactControllerComponents
and that are meant to be rendered
from Twig.
When using the registerReactControllerComponents
configuration shown previously, all
React components located in the directory assets/react/controllers
are registered as
React controller components.
You can then render any React controller component in Twig using the react_component
.
For example:
1 2 3 4 5 6
// assets/react/controllers/MyComponent.jsx
import React from 'react';
export default function (props) {
return <div>Hello {props.fullName}</div>;
}
1 2 3
{# templates/home.html.twig #}
<div {{ react_component('MyComponent', { 'fullName': app.user.fullName }) }}></div>
Backward Compatibility promise
This bundle aims at following the same Backward Compatibility promise as the Symfony framework: https://symfony.com/doc/current/contributing/code/bc.html