CODEWITHSUNDEEP
javascriptreactjs
Jonathan Allen Grant
Jonathan Allen Grant

Reputation: 3648

ReactJS: Why isn't my div showing up?

I have basic index.html and index.js that don't do much except the minimum. My html file is this:

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="container"></div>
</body>
<script src="fb's react url"></script>
<script src="fb's reactDOM url"></script>
<script type="text/jsx" src="index.js"></script>

and my index.js file is this:

var Grid = React.createClass({
      getInitialState: function() {
        return {
          grid: "Ola!"
        }
      },
      componentDidMount: function() {

      },
      render: function() {
        return ( < div > {
            Ola!
          } < /div >
        );
      }
  }
);

ReactDOM.render( < Grid / > ,
  document.getElementById('container')
);

When I load my page (index.html) in Google Chrome, I just get a blank white screen. The console isn't outputting any errors. What could be going wrong? I am very new to React.js and most web technologies.

Upvotes: 0

Views: 80

Answers (2)

J&#250;lius Retzer
J&#250;lius Retzer

Reputation: 1075

https://jsfiddle.net/9fcyrbj3/

In JSX, everything that is inside curly braces will be evaluated as a Javascript, so it needs to be a valid JS expression. { Ola! } therefore would need to become { 'Ola!' }.

However, you don't need curly braces here and you could simplify it like this:

render: function() {
    return (< div > Ola! < /div >);
  }

Upvotes: 4

Aditya Singh
Aditya Singh

Reputation: 16660

Change your render method as below. The {} in ReactJS evaluates the content inside as expression

render: function() {
    return ( 
      <div> Ola! </div>
    );
  }

Upvotes: 1

Related Questions