Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React in the browser, no build step necessary.
<html>
<head>
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.querySelector("#app")
)
</script>
</body>
</html>
<html>
<head>
<title>React Calculator</title>
<style>
input {
width: 200px;
text-align: right;
}
section {
width: 200px;
display: flex;
flex-wrap: wrap;
}
button {
width: 25%;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
state = {
input: ""
}
handleInput = e => {
if (e.target.value === "=") {
this.setState({ input: eval(this.state.input) })
} else if (e.target.value === "AC") {
this.setState({ input: "" })
} else {
this.setState({ input: this.state.input + e.target.value })
}
}
render() {
return (
<div>
<input readOnly value={this.state.input} />
<section>
{[
"AC","","%","/",
"7","8","9","*",
"4","5","6","-",
"1","2","3","+",
"0","",".","=",
].map(value =>
<button value={value} onClick={this.handleInput}>
{value}
</button>
)}
</section>
</div>
)
}
}
ReactDOM.render(
<App />,
document.querySelector("#app")
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment