Integrating React and Symfony 4.2.4.

This post will be useful for people who already know what React and Symfony are. The purpose of the HowTo is only to remind how to integrate React Javascript library with Symfony framework to write Ajax applications.

Our sample application will show planets catalogue. The data will be transferred via Ajax request from Symfony controller. Nothing special.

 

Run the following command to create a new symfony project.

To open the project in browser we will move to ‘SampleProject’ directory and run the Symfony Web Server using ‘./bin/console server:run’. Our sample project will be available on http://127.0.0.1:8000.

Now we will install Webpack Encore Bundle:

After that you will see ‘./webpack.connfig.js’ file and ‘assets’ directory.

To install React, React-Dom and other required components we will use the yarn.

Now let us edit the ./webpack.config.js file and change the content to

Let us create two controllers: DefaultController and PlanetController.

This command will create two files in ‘./src/Controller/DefaultController.php’ file and appropriate twig templates. The DefaultController.php file will have the following look.

PlanetController will be the serve the Ajax requests. I have hardcoded the planets json to make the code as simple as possible.

Now let us change the content of ‘base.html.twig’ and ‘index.html.twig’ files.

Here I have included bootstrap.min.css to style react components. In the ‘index.html.twig’ I have inserted the container div element with ‘root’ id.

Our React components will be placed in assets directory. The content of this directory will be built and placed in public directory.

Our application will consist of two components ‘./assets/app.js’ and ‘./assets/Components/Items.js’.

To run the dev environment and auto-build the project we will open two shells to run Symfony server:

and the yarn encore: