Maria Jane Maria Jane - 2 months ago 10
React JSX Question

hello world react using jsbin failed

https://jsbin.com/lopajimiqo/edit?html,js,output

What's wrong with my simple hello world attempt?

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

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

Answer

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>

Comments