Spring Boot (inject script in reactjs)

Question

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 ;/

Prakash Sharma · Accepted Answer · 2017-09-04 17:07:37Z

1

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')

answered Sep 4, 2017 at 17:07

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Spring Boot (inject script in reactjs)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related