How to use JSX file in Yii2 Asset Bundle

Question

I have a Yii2 setup, and I decided to use the Facebook JavaScript React.js framework , which provided a convenient way to declare HTML templates inside JavaScript code called JSX .

My JavaScript looks like this:

(function () {
    'use strict';

    MyBlock = React.createClass({
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            $.ajax({
                url: '/api/',
                dataType: 'json',

                success: function (data) {
                    this.setState({ data: data });
                }.bind(this)
            });
        },

        render: function () {
            <div class="block">
                {this.props.variable}
            </div>
        }
    });

    React.render(
        <ProfileQuestion />,
        document.getElementById('profile_question_wrapper')
    );
}());

AssetBundle helps me include the necessary libraries in my opinion, so I added the React.JS and JSX files from the CDN to my AssetBundle:

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
        'js/app.jsx',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

However, when he adds a script at the bottom of my page, he shows it as

<script src="/js/app.jsx"></script>

and does not mark the type of script as text/jsx, so the JSX Transform library does not recognize JSX syntax, and the .jsx file is interpreted as plain JavaScript, throwing a JSX-style syntax error.

SyntaxError: Unexpected token '<'

AssetBundle, .jsx text/jsx script ?

Answer 1

script js . JS, .

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

class JSXAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $js = [
        'js/app.jsx',
    ];
    public jsOptions = ['type'=>'text/jsx'];
    public $depends = [
        'app\assets\MyAsset'
    ];
}

. JsOptions View:: registerjsFile, , , jsFile Html . , , script