Skip to content

Instantly share code, notes, and snippets.

@ruucm

ruucm/index.html

Created February 21, 2021 12:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ruucm/f64a95d97af4898285d151ff3cfbff4b to your computer and use it in GitHub Desktop.
Save ruucm/f64a95d97af4898285d151ff3cfbff4b to your computer and use it in GitHub Desktop.
Download ZIP
react-in-simple-html
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<!-- <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '',
}
}
handleChange(event) {
this.setState({ name: event.target.value })
}
componentDidMount() {
alert('componentDidMount')
}
render() {
return (
<div>
<span>Say Hello to World : </span>
<input
type="text"
value={this.state.name}
onChange={e => this.handleChange(e)}
/>
<p>{this.state.name}</p>
</div>
)
}
}
ReactDOM.render(<Greeting />, document.getElementById('root'))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment