CODEWITHSUNDEEP
htmlreactjs
Xiaolei Li
Xiaolei Li

Reputation: 3

React Tutorial :Composing components show blank page

I am new to learn React Tutorial. When I try the example Composing components, it shows blank page. And it is normal when there just one component. I search the question many times, seems it's so easy that no one else to ask... Below it is my code, thanks a lot.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
         <title>React Tutorial</title>

        <link rel="stylesheet" href="css/base.css" />
        <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script>

      </head>
      <body>
       <div id="content"></div>
        <script type="text/babel">

var CommentList = React.createClass({
    render: function() {
        return (
            <div className = "commentList">
            Hello, world! I am a CommentList.
            </div>
        );
    }
});

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

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

ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
</script>
      </body>
          </html>

Upvotes: 0

Views: 55

Answers (1)

XYZ
XYZ

Reputation: 4480

Simple typing error.You have used
<CommentForm /> but you have defined it like var ComentForm = .correct the spelling to var CommentForm

<!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
        <title>React Tutorial</title>

       <link rel="stylesheet" href="css/base.css" />
       <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
       <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
       <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
       <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
       <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script>

     </head>
     <body>
      <div id="content"></div>
       <script type="text/babel">

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>
       );
   }
});

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

ReactDOM.render(
   <CommentBox />,
   document.getElementById('content')
);
</script>
     </body>
         </html>

Upvotes: 1

Related Questions