Last active
December 11, 2018 15:33
-
-
Save antonioiksi/fc228ab758d579ed9e6c9985734d7462 to your computer and use it in GitHub Desktop.
babel react example
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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>React Local</title> | |
| <script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> | |
| <script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> | |
| <script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| // Obtain the root | |
| const rootElement = document.getElementById('root') | |
| // Create a ES6 class component | |
| class ShoppingList extends React.Component { | |
| // Use the render function to return JSX component | |
| render() { | |
| return ( | |
| <div className="shopping-list"> | |
| <h1>Shopping List for {this.props.name}</h1> | |
| <ul> | |
| <li>Instagram</li> | |
| <li>WhatsApp</li> | |
| <li>Oculus</li> | |
| </ul> | |
| </div> | |
| ); | |
| } | |
| } | |
| // Create a function to wrap up your component | |
| function App(){ | |
| return( | |
| <div> | |
| <ShoppingList name="@luispagarcia on Dev.to!"/> | |
| </div> | |
| ) | |
| } | |
| // Use the ReactDOM.render to show your component on the browser | |
| ReactDOM.render( | |
| <App />, | |
| rootElement | |
| ) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
using <script type="text/babel"> in html