Integrate/ Inject React Component into Static(loaded) HTML

Question

What i want is to be able to render HTML from react component, after a page has loaded without reloading it.

I have a parent JSP loaded from a struts2 action, inside of which we are planning to integrate ReactJS as a roadmap to complete client-side UI. Here is the Child JSP.

<div id="app"></div><!-- load the component here-->
<script src='./react.js'></script>
<script src='./react-dom.js'></script>
<script src='./browser.min.js'></script><!-- transpiles the JSX code -->
<script type="text/Babel" src='./myReactComponent.js' /><!-- JSX -->

Sample JSX

import React from 'react';
import ReactDOM from 'react-dom';
const hello = <h1>Hello</h1>;
ReactDOM.render(hello, document.getElementById('app')); 

The parent JSP does an Ajax call to fetch a JSP that contains the above code like below.

<div id="someDiv"></div>
$('button').click({
// do an ajax call and fetch 'data'(JSP)
$('#someDiv').html(data);
});

Now, the bone of contention is, i can see the sources being loaded in the sources and network Tab (Chrome), but no component is rendered, not even a const object as in the sample JSX.

I tried the following before posting a query here

1. Tried all possible combinations of loading the Sources in the Child JSP.
2. Tried loading the JSX after the Document is ready - no luck here.
3. Tried ES6/babel, text/babel, js/babel etc all such combinations - throws unexpected '<' when the type is text/js.

I am in wondering if this is even a right way to migrate a server side stack like struts2 to a client one. PS we have a very large Struts + Spring implementation and moving the code to SPA in entirety would be herculean.

I plan to use React V15.

Answer 1

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

它必须是“ text / babel”，而不是“ text / Babel”