Fetch react app via ajax request and execute it

[vicpinm]

Hi, I'm learning React, and I have created a small react app and built it, so is ready to production.
My react app is shown after the user is authenticated, so I'm not loading directly the app. Instead, I'm trying to fetch the app with an ajax request, and set the response html into a container, like this:

   var appContainer = document.getElementById("app-container");
appContainer.outerHTML = request.responseText;
eval(document.getElementById("main-script").innerHTML);

The thing here is that I don't know hot to execute the main script that renders the page, I don't know how to locate it in my compiled app. If I were able to identify the main script that is executed when the page is loaded, I could fetch it with document.getElementById("main-script") and execute its content with eval.

The main body of my production-ready react app looks like this:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script >!function (e) {
        function r(r) {
            for (var n, p, l = r[0], a = r[1], f = r[2], c = 0, s = []; c < l.length; c++) p = l[c], 
Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0;
       ...</script>
<script src="/static/js/2.034d6219.chunk.js"></script>
<script src="/static/js/main.06ee54e5.chunk.js"></script>
</body>

This body is loaded correctly in my container, but the app is not rendered.

I don't mind using a different method than eval to render the react app. My purpose here is to fecth the app from backend after authenticating the user and then render it on a container.