<html>
<head>
<meta UTF-8> //(or something like that)
<script crossorigin src="unpkg.com/react...">
<script crossorigin src="unpkg.com/reactDOM...">
<script src="unpkg.com/babel...">
</head>
<body>
<div id="root></div>
<script type="text/babel">
class GuGuDan extends React.Component{
constructor(props){
super(props);
this.state = {
// put things that change
first: Math.ceil(Math.random()*9),
second: Math.ceil(Math.random()*9),
input: '',
result: '',
};
}
onSubmit = (e)=>{
e.preventDefault();
if(this.state.first*this.state.second === parseInt(this.state.input){
this.setState({
first: Math.ceil(Math.random()*9),
second: Math.ceil(Math.random()*9),
input: '',
result: 'Correct!',
});
}else{
this.setState({
input: '',
result: 'Incorrect!',
});
}
}
onChange = (e)=>{
this.setState({value: e.target.value});
}
render(){
return (
<div>
<div>What is {this.state.first} times by {this.state.second}?</div>
<form onSubmit={this.onSubmit}>
<input type="numbers" value={this.state.input} onChange={this.onChange} />
<button type="submit">Submit!</button>
</form>
<div>Result = {this.state.result}</div>
</div>
)
}
}
</script>
<script type="text/babel">
ReactDom.render(<GuGuDan />, document.querySelector('#root');
</script>
</body>
</html>
'Archive until 15 Jul 2021 > Learning React' 카테고리의 다른 글
| UseContext (0) | 2021.01.07 |
|---|---|
| React - switching from class way to functional way (ft. hooks) (0) | 2021.01.02 |
| React - ref (0) | 2021.01.02 |
| React - Babel and JSX (0) | 2021.01.02 |
| How react integrates with html code (0) | 2021.01.02 |