Skip to content

Instantly share code, notes, and snippets.

@CTimmerman
Last active November 14, 2023 22:30
Show Gist options
  • Save CTimmerman/02ca6cfdc654fbc3ee718b14d1268cee to your computer and use it in GitHub Desktop.
Save CTimmerman/02ca6cfdc654fbc3ee718b14d1268cee to your computer and use it in GitHub Desktop.
Hello world, React edition.
<html>
<!-- Thanks to https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4 -->
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js">//React controllery stuff.</script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">//More React controllery stuff.</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">//Translates JSX to JS.</script>
</head>
<body>
<div id="root">Target node for our React code.</div>
<script type="text/babel">
class Greet extends React.Component{
constructor(){
super()
this.state = {
message: "world"
}
this.updateMessage = this.updateMessage.bind(this)
}
render(){
return (
<div>
<h1>{this.props.greeting} {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
updateMessage(){
this.setState({
message: "my friend (from changed state)"
})
}
}
ReactDOM.render(
<Greet greeting="Hello"/>,
document.getElementById("root")
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment