CODEWITHSUNDEEP
javascriptreactjs
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Problems while developing a reactjs app

I wrote a simple comment box app in react js. The code is as follows: 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
     var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});
    </script>
  </body>
</html>

When I opened that code in local server, I got a blank page. I even installed reactjs by using bower like this: 

bower install --save react

But the result was same.
Why is it loading a blank page?

Upvotes: 0

Views: 64

Answers (2)

pgraham
pgraham

Reputation: 446

You are only defining classes and not actually rendering anything to the DOM. I suspect you want to create a top level component consisting of both a CommentList and a CommentForm and render that into the example div.

var Comments = React.createClass({
    render: function () {
        return (
            <div className="comments">
                <CommentList/>
                <CommentForm/>
            </div>
        );
    }
});

React.render(<Comments/>, document.getElementById("example"));

Have a look at the docs for React.render. You may also want to take a look at the React tutorial.

Fiddle

Upvotes: 2

Sean O
Sean O

Reputation: 2619

You've defined your React classes, but haven't told React to place them in the DOM.

Try adding: 

React.render(<CommentForm />, document.getElementById('example'));

or: 

React.render(<CommentList />, document.getElementById('example'));

at the bottom of your block to see your elements on the page.

Ideally, you'll want separate DIVs for both form & list. e.g.

<div id='commentform'></div><div id='commentlist'></div>

Upvotes: 3

Related Questions