Problems while developing a reactjs app

Question

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?

Do you have anything in your javascript console on the browser? — jmartins
– jmartins, Commented May 4, 2015 at 18:00

Sean O · Accepted Answer · 2015-05-04 18:12:38Z

3

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>

answered May 4, 2015 at 18:12

Sean O

2,6991 gold badge27 silver badges28 bronze badges

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

Comments

jmartins · Accepted Answer · 2015-05-04 18:42:20Z

2

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

edited May 4, 2015 at 18:42

jmartins

9914 silver badges16 bronze badges

answered May 4, 2015 at 18:14

pgraham

4464 silver badges13 bronze badges

1 Comment

jmartins Over a year ago

Good answer. I was creating the fiddle to answer that: jsfiddle.net/cxqzxeqk

Collectives™ on Stack Overflow

Problems while developing a reactjs app

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related