script.onload JSX file
<p>I have problem when I try to load JSX file via native js function and script.onload event.</p>

<p>In my HTML file inside HEAD tag I have only one script to load:</p>

<pre><code>&lt;script src="js/01_jquery-1.12.2.min.js" defer&gt;&lt;/script&gt;
</code></pre>

<p>Then in body I have this script which will load all other JS and JSX files</p>

<pre><code>window.onload = function onLoad() {
    function getScriptFile(inFile, scriptType, qname) {
        ....
    }

    function loadJsQ(inObj) {
       ....
    }

    // lib js
    loadJsFiles({file: 'js/jquery-ui.min.js'});
    loadJsFiles({file: 'js/bootstrap.js'});
    loadJsFiles({file: 'js/babel-core-5-8-34-browser.js'});
    loadJsFiles({file: 'js/react-with-addons.js'});
    loadJsFiles({file: 'js/react-dom.js'});

    //class app
    loadJsFiles({file: 'classes/User.js'});
    loadJsFiles({file: 'classes/MainApplication.js'});

    //jsx
    loadJsFiles({file: 'jsx/mainReact.jsx', type: "text/babel"});

    //
    $(document).dequeue('queueLoadJsFiles');
};
</code></pre>

<p>Function inside window.onload are:</p>

<pre><code>function getScriptFile(inFile, scriptType, qname) {
    var scriptType = scriptType || false;
    var script = document.createElement('script');

    if(scriptType){
        script.type = scriptType;
    }

    document.head.appendChild(script);

    script.onload = script.onreadystatechange = function( _, isAbort ) {
        console.log("script",script);

        if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
            script.onload = script.onreadystatechange = null;
            script = undefined;

            if(!isAbort) {
                console.log("Script is loaded", inFile);
                setTimeout(function () {
                    $(document).dequeue(qname);
                }, 100)
            }
        }
    };

    script.src = inFile;
}
</code></pre>

<p>Next function is:</p>

<pre><code>function loadJsQ(inObj) {
    var qname = "queueLoadJsFiles";
    $(document).queue(qname, function() {
        var inFile = inObj.file,
            inType = inObj.type || false;

        getScriptJQueryQueue(inFile, inType, qname);
    });
}
</code></pre>

<p>Everything loaded and check via console, but jsx is not executed.</p>

<p>My MainReact.jsx file is</p>

<pre><code>//file jsx/mainReact.jsx
"use strict";

console.log("is ok in JSX???");

const SomeComponent = React.createClass({
....
});


const MainApp = React.createClass({
....
});


{

    ReactDOM.render(
        &lt;MainApp /&gt;,
        document.getElementById('mainAppCont')
    );

    let app = new MainApp();
}
</code></pre>

<p>My class files are </p>

<pre><code>//file classes/User.js

class User{
    constructor(){...}

    ...
}    
</code></pre>

<p>And</p>

<pre><code>//file classes/MainApplication.js

class MainApplication{
    constructor(){...}

    ...
} 
</code></pre>

<p>Before ask My Question, I have to say, When I load all js and jsx files via HEAD, it works.</p>

<p>My question is, why I can not load in this way via getScriptFile. Everything load except jsx file? Can you help me to solve this problem. I need to load via getScriptFile. </p>

<p>After all, HEAD is looking like this:</p>

<pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="cache-control" content="max-age=0"&gt;
    &lt;meta http-equiv="cache-control" content="no-cache"&gt;
    &lt;meta http-equiv="expires" content="0"&gt;
    &lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"&gt;
    &lt;meta http-equiv="pragma" content="no-cache"&gt;

    &lt;title&gt;Title&lt;/title&gt;

    &lt;!-- CSS LIBS --&gt;
    &lt;link rel="stylesheet" href="css/reset.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap-theme.css"&gt;
    &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
    &lt;link rel="stylesheet" href="css/flags.css"&gt;

    &lt;!-- JS LIBS --&gt;

    &lt;script src="js/jquery-1.12.2.min.js" defer=""&gt;&lt;/script&gt;

    &lt;!-- added via getScript --&gt;
    &lt;script src="js/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;script src="js/babel-core-5-8-34-browser.js"&gt;&lt;/script&gt;
    &lt;script src="js/react-with-addons.js"&gt;&lt;/script&gt;
    &lt;script src="js/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="classes/User.js"&gt;&lt;/script&gt;
    &lt;script src="classes/MainApplication.js"&gt;&lt;/script&gt;
    &lt;script type="text/babel" src="jsx/mainReact.jsx"&gt;&lt;/script&gt;

&lt;/head&gt;
</code></pre>

<p>Line of code in JSX file, at top console.log("is ok in JSX???"); will not be executed...
All files are in place, and there are no any error in console.</p>

<p>:(</p>

<p>Thank you in advance!</p>