How to use React with Symfony 4

Lucas Matte
Dec 1, 2018 · 7 min read
Image for post
Image for post

Introduction

Tools

Step 1 — Gather our Tools

yarn add @symfony/webpack-encore --dev
"@symfony/webpack-encore": "^0.19.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-on-rails": "^11.0.8",
"react-transition-group": "^2.3.1"
composer require limenius/react-bundle

Step 2 — Configuration

React Bundle

limenius_react:
default_rendering: "both"
serverside_rendering:
fail_loud: false
trace: false
mode: "phpexecjs"
server_bundle_path: "%kernel.project_dir%/var/webpack/server-bundle.js"
server_socket_path: null

Webpack Encore

// webpack.config.js
let Encore = require('@symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
//
.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// the following line enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// allow sass/scss files to be processed
.enableSassLoader()
// React Pages Javascript
.addEntry('js/app', './assets/js/React/App/Startup/registration.js')
// Add style entry
.addStyleEntry('css/app', './assets/scss/app.scss')
// Add react preset
.enableReactPreset()
.configureBabel(function(babelConfig) {
// add additional presets
babelConfig.presets.push('es2015');
babelConfig.presets.push('stage-0');
})
.enableBuildNotifications().enablePostCssLoader()// create hashed filenames (e.g. app.abc123.css)
//.enableVersioning()
;
// export the final configuration
module
.exports = Encore.getWebpackConfig();
var Encore = require('@symfony/webpack-encore');Encore
// directory where all compiled assets will be stored
.setOutputPath('var/webpack/')
// what's the public path to this directory (relative to your project's document root dir)
.setPublicPath('/')
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()

// will output as app/Resources/webpack/server-bundle.js
.addEntry('server-bundle','./assets/js/React/ServerRender/registration.js')
// Add react preset
.enableReactPreset()
.configureBabel(function (babelConfig) {
// add additional presets
babelConfig.presets.push('es2015');
babelConfig.presets.push('stage-0');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
})
.enableSourceMaps(!Encore.isProduction());// export the final configuration
module.exports = Encore.getWebpackConfig()

React On Rails

import ReactOnRails from 'react-on-rails'
import ReactApp from './ReactApp';
ReactOnRails.register({ ReactApp });
Image for post
Image for post
A sample directory structure using React on Rails for a React App named ‘ApplicationApp’

Step 3 — Add React to Twig

Adding React

{{ react_component('ReactApp', {'props': {} }) }}
{{ react_component('ReactApp', {'props': {'data': data, 'data2': data2} }) }}
constructor(props) {
super();
this.state = {
data: JSON.parse(data), //If JSON data is provided
data2: data2 // For other types of data
}
}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/ReactApp.js') }}" type="application/javascript"></script>
{% endblock %}

Conclusion

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store