Created
November 7, 2018 01:49
-
-
Save tkfm-yamaguchi/a8231f0a1390c8232ec9d8165c334250 to your computer and use it in GitHub Desktop.
A prototyping starter set for React
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 lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Prototping with React</title> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script> | |
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> | |
<!-- See https://github.com/babel/babel/issues/2987#issuecomment-245443599 --> | |
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
<script src="index.js" type="text/babel"></script> | |
</body> | |
</html> |
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
'use strict'; | |
class App extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
name: props.name, | |
}; | |
this.handleTextChange = this.handleTextChange.bind(this); | |
} | |
handleTextChange(e) { | |
const newText = e.target.value; | |
this.setState({ | |
name: newText, | |
}); | |
} | |
render() { | |
return ( | |
<div> | |
<p>React Version {React.version}</p> | |
<p><input type="text" value={this.state.name} onChange={this.handleTextChange} /></p> | |
<p>Hello, {this.state.name}!</p> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render( | |
<App name="World" />, | |
document.getElementById('app') | |
); | |
// set ft=javascript.jsx |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment