React Start
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Start</title>
<!--react cdn-->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!--babel cdn-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--기본 div root 생성-->
<div id="root"></div>
<script type="text/babel">
//Converter 컴포넌트 생성
const Converter = () => {
const [fliped, setFliped] = React.useState(true)
//onClick, Flip
const onClickFlip = () => {
setFliped(!fliped)
}
const MtoH = () => {
const [minutes, setMinutes] = React.useState(0) //분
const onChangeMinutes = (e) => {
setMinutes(e.target.value)
}
//onClick, Reset
const onClickReset = () => {
setMinutes(0)
}
return(
<div>
<label htmlFor = "minutes">Minutes</label>
<input value={minutes} onChange = {onChangeMinutes} id="minutes"/>
<br/>
<h1>{minutes} Minutes to {minutes/60} Hours</h1>
<button onClick={onClickFlip}>Flip</button>
<button onClick={onClickReset}>RESET</button>
</div>
)
}
const HtoM = () => {
const [hours, setHours] = React.useState(0)
const onChangeHours = (e) => {
setHours(e.target.value)
}
//onClick, Reset
const onClickReset = () => {
setHours(0)
}
return(
<div>
<label htmlFor ="hours">Hours</label>
<input value={hours} onChange = {onChangeHours} id="hours"/>
<br/>
<h1>{hours} Hours to {hours*60} Minutes</h1>
<button onClick={onClickFlip}>Flip</button>
<button onClick={onClickReset}>RESET</button>
</div>
)
return{
reset : onChangeHours
}
}
//JSX Return
if(fliped){
return(
<MtoH />
)
} else{
return(
<HtoM />
)
}
}
//ReactDom을 이용하여, root Div에 Counter Render
ReactDOM.render(
<Converter />, document.getElementById("root")
)
</script>
</body>
</html>