<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <div id="root"></div>
</body>
<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"></script>
<script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script>
<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    let counter=0;
    function countUp() {

    }
    function App() {
        const [counter,setCounter] = React.useState(0); //undefeined=data와 함수 하나=data바꿀 때 쓰는 함수
        //인덱스와 같은 기능
        //새로운 값을 가지고 컴포넌트 자체가 재생성
        //state가 바뀌면 리렌더링 일어남
        const onClick=() => {
            //setCounter(counter+1);
            setCounter((current)=> current+1); //현재 state바탕으로 다음 state 세팅 시
        };
        return (
        <div>
            <h3> Total clicks: {counter}</h3>
            <button> Click me</button>
        </div>
        );
    } 
    ReactDOM.req(<App />,root);
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <div id="root"></div>
</body>
    <script  src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"></script>
    <script  src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script> 
    <script  src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script> 
    <script type="text/babel">
        function MinutesToHours() {
            const [amount,setAmount] =React.useState(0)
            const [inverted,setInverted]=React.useState(false);
            const onChange = (event) => { //event=이벤트 객체
                setAmount(event.target.value);
            } //입력 필드의 값이 변경될 때
            const reset =() => setAmount(0);
            const onInvert =() =>{
                reset();
                setInverted(current => !current)};
            
            return (
            <div>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                    value={inverted ? amount*60 :amount} 
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number" 
                    onChange={onChange}
                    disabled={inverted ===true}
                    /> 
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                    value={inverted ? amount : Math.round(amount/60)} 
                    id="hours" 
                    placeholder="Hours" 
                    type="number" 
                    disabled={inverted ===false}
                    onChange={onChange}
                    /> 
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
            </div>
            );
        } 
        function KmToMiles() {
            return(
                <h3> KM 2 M </h3>
            )
        }
        function App() {
            const [index,setIndex]=React.useState("xx");
            const onSelect=(event) =>{
                setIndex(event.target.value);
            }
            return(
                <div>
                    <h1> Super converter</h1>
                    <select value={index} onChange={onSelect}> 
                        <option value="xx"> Select  your units</option>
                        <option value="0"> Minutes & Hours </option>
                        <option value="1"> Km & Miles </option>
                    </select>
                    <hr />
                    {index==="xx" ? "Please select your units" : null}
                    {index==="0" ? <MinutesToHours /> : null}
                    {index==="1" ? <KmToMiles /> : null}
                    
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />,root);
    </script>

    </html>