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');
)
2 answers
solution1
2 2016-09-20 16:29:06
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] )
solution2
0 ACCPTED 2016-09-21 03:47:01
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.