Skip to content

Instantly share code, notes, and snippets.

@RyanAtViceSoftware

RyanAtViceSoftware/hello-react-render-method-broken.html

Last active September 12, 2015 13:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RyanAtViceSoftware/9119b93f94679e4d6741 to your computer and use it in GitHub Desktop.
Save RyanAtViceSoftware/9119b93f94679e4d6741 to your computer and use it in GitHub Desktop.
Download ZIP
Hello React Render Method - Paste the code below into https://facebook.github.io/react/jsx-compiler.html to see why you must have only a single root element in your JSX.
Raw
hello-react-render-method-broken.html
var HelloMessage = React.createClass({
render: function() {
return <div>Hello React</div> // error: must return a single node
<div>How are you?</div>
}
});
React.render(<HelloMessage/>, mountNode);
Raw
hello-react-render-method-fixed.html
var HelloMessage = React.createClass({
render: function() {
return <div> // works
<div>Hello React</div>
<div>How are you?</div>
</div>
}
});
React.render(<HelloMessage/>, mountNode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment