Integrate ReactJS as frontend development method

[julbrs]

Read the doc in docs/dev.md

There is now 2 console to run in order to develop with reactJS on this project:

• bin/console server:run to start the server
• yarn encore dev --watch to build the react component for rendering in template

There is a react app already developed in the project:

• in webpack.config.js we define the app app in the file ./assets/js/app.js
• we create our React app in app.js (you can create component, etc)
• we call the react app in any template like this (done in contact.twig.html)

{% block body %}
Below here is a React App:
{# The ReactJS container #}
<div id="root"></div>

{% endblock %}

{% block javascripts %}
{# Load the React app from app.js file #}
{{ encore_entry_script_tags('app') }}
{% endblock %}

Test the app in the Contact page (under More)

(yeah I know it is a really simple app. but we can imagine consume any data from the Entities for example)

We can :

• create multiple react app when we need (for ex for nomenclature listing instead of jquery ajax)
• have a single react app that handle all

It allow to do react when and where we want. It allow to migrate part by part the existing webapp to react if we want to go to a single react app / single page application.

[StaudenmannM]

Hi, I don't really see the link between react app and Symfony in this example... how are we supposed to consume entity from the react app? Other minor comment, I think npm is easier to use in React project :)

[analuspi]

I don't know if npm is easier, but I always used yarn... :)

[analuspi]

I have some doubts in this too @StaudenmannM...

how are we supposed to consume entity from the react app

Are we going to do an AJAX requisition?

[julbrs]

I don't know if npm is easier, but I always used yarn... :)

me too :D

https://www.reddit.com/r/reactjs/comments/9ypfd8/why_does_createreactapp_use_yarn/

We can switch to npm !

[julbrs]

@StaudenmannM @analuspi can we meet for that I will show you !