CODEWITHSUNDEEP
javascriptspringreactjsspring-boot
sh1nen
sh1nen

Reputation: 199

Spring Boot (inject script in reactjs)

I'm having a really difficult time figuring out what I possibly could do wrong as probably most scenarios has been tested.

I'm writing web app using Spring Boot and ReactJS for frontend. I'm trying for now to write simple script showing some plain text which is imported from separate file to html one. After doing so, I ended up with nothing really showing up.

Here is my structure of project:

enter image description here

and here is my app.js in which I have my component defined:

var CommentBox = React.createClass({
render: function() {
    return (
        <div className="commentBox">
            Hello, world! I am a CommentBox.
        </div>
    );
}
});
   ReactDOM.render(<CommentBox />, document.getElementById('content')
);

Below is the cardists.html page:

<!DOCTYPE html>
<html>
<head>
<title>Cardists</title>
   <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
    3.3.7/css/bootstrap.min.css"/>
</head>
<body>

   <div id='root'></div>
      <script src="react-15.0.1.js"></script>
      <script src="react-dom-15.0.1.js"></script>
      <script src="cdnjs.cloudflare.com/ajax/libs/babel-
       core/5.8.23/browser.min.js"></script>

      <script type="text/babel" src="../public/js/app.js"></script>

</body>
</html>

[PROBLEM] Where could I possibly made a mistake as everything for first glance seems ok to me, but I'm getting blank page ;/

Upvotes: 0

Views: 247

Answers (1)

Prakash Sharma
Prakash Sharma

Reputation: 16482

You are rendering your application in content div like

ReactDOM.render(<CommentBox />, document.getElementById('content')

But in you html file there is no div with content id. There is one div with id root so you need to render your component in that div like

ReactDOM.render(<CommentBox />, document.getElementById('root')

Upvotes: 1

Related Questions