Created
October 23, 2018 11:34
-
-
Save valex/75ec53393747d1bfe6481759c0dfb7f7 to your computer and use it in GitHub Desktop.
Only one root element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>JSX multiple nodes</title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- my app renders here --> | |
| </div> | |
| <script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script type="text/babel"> | |
| class Example extends React.Component { | |
| render() { | |
| var greeting = [ | |
| <span key="greet">Hello</span>, | |
| ' ', | |
| <span key="world">World</span>, | |
| '!', | |
| ]; | |
| return ( | |
| <div> | |
| {greeting} | |
| </div> | |
| ); | |
| } | |
| }; | |
| ReactDOM.render( | |
| <Example/>, | |
| document.getElementById('app') | |
| ); | |
| // <div> | |
| // <span>Hello</span> | |
| // <span>World</span> | |
| // ! | |
| // </div> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment