How to make friends Yii2 with React?

Question

Yii

Help the dinosaur - I've been doing everything with jQuery for 5 years now. Now I set myself something more modern - I started with React. And I already want to go back to the cozy living room.
The same Vue for the training project got up immediately, with one connection. And the brainchild of Facebook does not start in any.
So, a couple of conditions: React is inside vendor/npm-asset. And only there. We connect:

spoiler

class NpmAsset extends AssetBundle
{
    public $sourcePath = '@npm';
    public $js = [
        'react/cjs/react.production.min.js',
        'react-dom/cjs/react-dom.production.min.js',
    ];

    public $jsOptions = [ 'position' => \yii\web\View::POS_HEAD ];
}

Connected.
ReferenceError: require is not defined
Actually, the babel is in the system and compiles ES6 into everything else, but I can't figure out how to set the babel on the react source when it shouldn't change at all. Babel in the browser doesn't want to run react either.
Explain on your fingers - what am I doing wrong and how should I? I don't know, I can't. Do I need to compile from these files with Bebel first?
Let's get right on the fingers - What, how, where, why, why. I somehow did not expect that it would take so much to dance.
As luck would have it, all the info on the tyrnet is already outdated about this frontend of yours and nothing works anymore. Apparently, this is why no one undertakes to write actual articles - tomorrow a new webpack2 will be released and everyone will forget about gulp / bover / webpack :(

Answer 1

I figured it out, thank the pasta monster. I'll leave a post for all those who have a lot of questions, but few answers:
What is the essence of today's js (I write for the jkver of dinosaurs like myself, who heard about everything new, did not fully understand):
1. Previously, js was a ton of separate files in global space. Zhkveri and after her 10 plugins of different directions. This is still the case now, only now webpack packs even more files, but written in ES with the participation of require and export. The same require, familiar to server languages, inside one file will import another file in which export is registered. In a node out of the box, this works, but in this case we have a backend not a node and it does not work.
2. What is the convenience? Now we have everything in the same categories in folders, as in all normal languages ​​with namespaces, only without namespaces. What no structure
3. We write modules. Running line = module, counting time = module. All this is laid out in a readable form according to the folder structure within the project. We collect them in webpack. Here is an introductory one for webpack, for example: https://habr.com/post/309306/
4. We assembled it with webpack - inside it, Babel will make the code understood by the browser, and not by the node, connect all the JS modules from the folders and give the finished file. We connect it as before. The same Browserify, the same concat, only smarter, or something.
5. We connect the final file as usual on the page - this completes the assembly. Next, our ES5-6 code has already gone with or without react. Then watchers, less-sass-scss-babel with presets and everything else becomes usable through webpack and goes to folders, from where the server gives ready-made and compiled static files.
In this case, it was not possible to make Yii friends with React in the sense that I wanted to do this without breaking the hierarchy - through vendor/npm-asset, without /node_modules/ at the root, this construction does not start - webpack does not see them through require. But node_modules at the root is ok.

Answer 2

1. Scroll down to the "Related Questions" section
2. Follow the link
3. Read until enlightened.

Answer 3

Try the ReactYii2Essentials library , it allows you to use Yii2 as an API for React and adds familiar fields, forms, and other front-end usefulness to React. Also paired with it is a library for Yii2, which adds a React CRUD generator to gii, which allows you to quickly start. It's still in development, but already quite useful.