Last active
November 14, 2023 22:30
-
-
Save CTimmerman/02ca6cfdc654fbc3ee718b14d1268cee to your computer and use it in GitHub Desktop.
Hello world, React edition.
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
<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