Hello World doesn't work on JSBin

Question

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

Andrew Li · Answer 1 · 2016-09-20T16:37:50.863

You render to the DOM with the module ReactDOM, separate from React:

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

Also, your semicolon was misplaced. Remember, ReactDOM is a different module. Per the documentation:

The react-dom package provides DOM-specific methods that can be used at the top level of your app...

ReactDOM.render
render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

score 0 · Accepted Answer · answered Sep 21 '16 at 03:47

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>

Hello World doesn't work on JSBin

2 Answers2