Created
February 8, 2019 17:11
-
-
Save Piyush3dB/22f285ee3ed92a5b1fcb713a02e511e6 to your computer and use it in GitHub Desktop.
Simple page using React+JSX without npm/webpack build step.
This file contains 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> | |
| <meta charset="UTF-8" /> | |
| <title>Add React in One Minute</title> | |
| </head> | |
| <body> | |
| <h2>Add React in One Minute</h2> | |
| <p>This page demonstrates using React with no build tooling.</p> | |
| <p>React is loaded as a script tag.</p> | |
| <!-- We will put our React component inside this div. --> | |
| <div id="like_button_container"></div> | |
| <!-- Load React. --> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <!-- Don't use this in production: --> | |
| <script src="https://unpkg.com/[email protected]/babel.min.js"></script> | |
| <!-- Load our React component. --> | |
| <script type="text/babel"> | |
| 'use strict'; | |
| class LikeButtonCore extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { liked: false }; | |
| } | |
| render() { | |
| if (this.state.liked) { | |
| return 'You liked this.'; | |
| } | |
| // Display a "Like" <button> | |
| return ( | |
| <React.Fragment> | |
| <button onClick={() => this.setState({ liked: true })}> | |
| Like | |
| </button> | |
| </React.Fragment> | |
| ); | |
| } | |
| } | |
| class LikeButton extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| } | |
| render() { | |
| return ( | |
| <React.Fragment> | |
| <LikeButtonCore /> | |
| <LikeButtonCore /> | |
| <LikeButtonCore /> | |
| </React.Fragment> | |
| ); | |
| } | |
| } | |
| </script> | |
| <script type="text/babel"> | |
| const domContainer = document.querySelector('#like_button_container'); | |
| ReactDOM.render(<LikeButton />, domContainer); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment