Individual elements on a page?

Question

JavaScript

There are elements on the page that need to be changed dynamically, for example:
The likes counter under the post and under each comment from users.
In general, it is clear that you can achieve this with the help of banal jQuery. But how to organize the code in a more structured way?
Would it make sense to use React components under each such element, in other words, we have a piece of html:

<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>

Each div is a separate React application, how many such applications can be spawned on the page and how this affects browser performance.
I also looked at the https://dojotoolkit.org library , which also has convenient tools for Dom manipulation, what do you think?

Answer 1

Quite possible. Thus, we are gradually transferring a large application from mvc to api based on react. Only, rather, these are not separate react applications, but simply several different entry points of one. You don't run react every time. It's just that react-house will render something into several different divs. Why not. In the end, they all look together in 1 redux store and can quite communicate through it. When the whole page was transferred to react, we combine it into one entry point. No problems, in terms of performance, including, have so far been noticed.

Answer 2

Don't over-optimize, yes, you can use components under each such element. You can also take a look at Vue.js to decide which is easier to write and maintain.

Answer 3

Do not produce anything, for God's sake. If you took React, study the theory in terms of components and you will be happy