Created
July 10, 2019 22:35
-
-
Save JajuanX/f47bbb7bbd4e927e72f0e53b37a6a3cf to your computer and use it in GitHub Desktop.
Rendering on the Dom
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>React Practice</title> | |
| <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 src="https://unpkg.com/[email protected]/babel.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <!-- | |
| INSTRUCTIONS: | |
| 1) Make your own functional component, called Mood. | |
| 2) The Mood component should return an h1 tag that says: | |
| "I am excited to learn React!" | |
| 3) Use ReactDOM to render your mood inside the root div, | |
| and make sure you can see it on the screen. | |
| --> | |
| <script type="text/babel"> | |
| class Mood extends React.Component { | |
| render(){ | |
| return( | |
| <h1>I am excited to learn React!</h1> | |
| ) | |
| } | |
| } | |
| ReactDOM.render( | |
| <Mood/>, | |
| document.getElementById('root') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment