Встраивание React в Yii2 приложение

Сначала нужно добавить сам React в зависимости, например

composer require bower-asset/react 

После этого создаем AssetBundle с реактом

class ReactAsset extends AssetBundle
{
    public $sourcePath = '@bower-asset/react';
    
    public $js = [
        'https://unpkg.com/babel-standalone@6/babel.min.js',
        'react.production.min.js',
        'react-dom.production.min.js',
    ];
}

Babel нужен для корректной работы JSX. Если JSX не используется, babel можно убрать.

Теперь нужно создать еще один пакет, который будет содержать React приложение

class ReactAppAsset extends  AssetBundle
{
    public $css = [
        'css/Messenger.css'
    ];

    public $js = [
        'js/ReactApp.js'
    ];

    public $jsOptions = [
        'type' => 'text/babel'
    ];

    public $depends = [
        ReactAsset::class
    ];
}

Держать React приложение в отдельном пакете необходимо в данном случае из-за JSX, которому нужен babel. Браузер не понимает JSX, он понимает только чистый JS, поэтому в параметре jsOptions нужно указать что это файлы будут обработаны babelом.

Дальше во вьшке указываем тег, в котором будем рендерить React

<div id="react-app"></div>

И создаем само приложение в js файле

class App extends React.PureComponent {

render() {
        return (
            <div>Hello world!</div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('react-app')
);

Теги: