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