Black Friday 2022 Offers 30% discount in SymfonyInsight yearly business plan (offer ends today)

Enabling React.js

Edit this page

Enabling React.js

Screencast

Do you prefer video tutorials? Check out the React.js screencast series.

Tip

Check out live demos of Symfony UX React component at https://ux.symfony.com/react!

Using React? First add some dependencies with Yarn:

1
2
3
4
5
# if you use the Yarn package manager
$ yarn add react react-dom prop-types

# if you use the npm package manager
$ npm install react react-dom prop-types --save

Enable react in your webpack.config.js:

1
2
3
4
5
6
7
// webpack.config.js
  // ...

  Encore
      // ...
+     .enableReactPreset()
  ;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Your .js and .jsx files will now be transformed through babel-preset-react.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
Symfony 5.4 is backed by Private Packagist.