Last active
August 20, 2018 04:05
-
-
Save ahmedmusawir/6c6ccbb4e64721a5beb5e6a510ac4727 to your computer and use it in GitHub Desktop.
REACT – ON ANY HTML PAGE WITHOUT CREATE REACT APP - W/ SCRIPT TAG FROM CDN
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
| <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"> | |
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" | |
| crossorigin="anonymous"> | |
| <script crossorigin src="https://unpkg.com/[email protected]/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> | |
| <title>React Inline</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="text/babel"> | |
| class App extends React.Component { | |
| handleClick(e) { | |
| console.log('whaap'); | |
| } | |
| render() { | |
| return ( | |
| <div className="app-content container"> | |
| <h1 className="jumbotron">React Works!</h1> | |
| <article> | |
| <h3>Bootstrap 4 Added</h3> | |
| <p> | |
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate eos fugiat | |
| vel necessitatibus dolores molestiae quas, praesentium similique, est minima | |
| consequatur sit aspernatur nostrum nulla et maxime maiores distinctio possimus! | |
| </p> | |
| <button className="btn btn-danger" onClick={this.handleClick}>Click Works!</button> | |
| </article> | |
| </div> | |
| ) | |
| } | |
| } ReactDOM.render( | |
| <App/>, document.getElementById('app')); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment