[SOLVED] Hello World doesn't work on JSBin

Hello World doesn't work on JSBin

What's wrong with my simple hello world attempt? Here's the JSBin

class Hello extends React.Component {
  render() {
    return(
      <h1>Hello {this.props.name}</h1>
    )
  }
}

React.render(
  <Hello name="World!"/>,
  document.getElementById('name');
)

Solution

It is a very recent change introduced with 0.14. They split up React into a core library and the DOM adapter. Rendering is now done via ReactDOM.render()

Since you are using version 15.1.0 you should use ReactDOM.render() and in order to do so you need to include react-dom as a dependency in your jsbin html as

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Also in ReactDOM.render you need to place the semicolon after ReactDOM.render(); and not inside it.

Here is the working snippet.

class Hello extends React.Component {
  render() {
    return(
     <h1>Hello {this.props.name}</h1>
    )
  }
}

ReactDOM.render(
   <Hello name="World!"/>,
  document.getElementById('name')
);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
  <div id="name"></div>
</body>
</html>