React.js plugin - how much do you need to install?

Question

Building projects

Good afternoon!
I want to make a module for sites with a rather complex presentation. Something like the dialogues in Baldur's Gate. It is much easier for me to make it on React.js, which I am currently studying. Or Backbone.js, but I don't want to remember it.
This will be a plugin for Wordpress, which will be installed mainly on landing pages for which loading speed is critical.
Question:
If I write "Hello world" in React, what is the minimum volume of libraries and what libraries need to be uploaded to the site. Is it possible to somehow compile this into a single file of minimal size.
I understand you need React.js itself, Babel and application code, or just React and compiled code?

Answer 1

This is a general question for the app, rather than for WordPress in general.
If you know react, then you understand that it + its dependencies should be loaded. And how you implement it - separately or in a bundle - is a matter of taste.
You can bundle it - but it's better to load the components depending on the need, and not so - so that it is.
I already met one plugin with react on board. 1000 with a small kilobyte of minified js. When uploading gzip, it turns out > 200 kilobytes. But they don’t think that the client on their side should download, unpack and render it. And not every client has the proper memory and speed.
So the question is - do you really need a react in a vp plugin? Maybe it's like a cannon on sparrows?

Answer 2

In general it is possible to load a script in event.
For example, you only need to load react and react home on pages where the shortcode is included. Then you do the following:
1. On init wp, register the react script and react home and maybe babel.

function react_enquip_script(){
   // Регистрируете скрипты в WP
}

2. Create a react load event by hanging a hook)
3. Create a shortcode (this is just an example)

add_shortcode('component_chat', 'component_chat');
function component_chat(){
   do_action('react_enquip_script');
   // Прочий код, в том числе подключение компонента
}

Let me remind you that all scripts must be uploaded to the plugin folder