CODEWITHSUNDEEP
javascriptreactjsjspstruts2server-side-rendering
namasri aditya
namasri aditya

Reputation: 11

Integrate/ Inject React Component into Static(loaded) HTML

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. P.S. 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.

Upvotes: 1

Views: 748

Answers (1)

rajeev
rajeev

Reputation: 64

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

it have to be "text/babel" instead of "text/Babel"

Upvotes: 0

Related Questions