오늘은 노마드코더로 ReactJS를 공부하는 네 번째 날입니다. 오늘도 화이탱입니다!
#3.5 (Inputs and State)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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");
function App(){
//#1 first is the value and the second is the function that we use to modify the value and rerender our component
const [minutes, setMinutes] = React.useState(0);
const onChange =(event) => {
//#4 function for onChange will be executed and we will get the value to modify to current value
setMinutes(event.target.value);
}
return(
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
//#2 we put the value from the const to the value so the value of the input can be equal to the state
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
//#3 we listen to the changes and when the input changes we do the function onChange on the top - if we delete onChange, nothing will be inputted as the default is set to 0 and no changes are listened
onChange={onChange} />
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
//html - to connect the label with input we use for and id
//JSX - should use htmlFor instead of for and className instead of class
};
ReactDOM.render(<App/>, root);
</script>
</html>the output
#3.6~3.8 (State Practice)
converting the minutes into hours and making a reset button
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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");
function App(){
const [minutes, setMinutes] = React.useState();
const onChange =(event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
return(
<div>
<h1 className="hi">Super Converter</h1>
<div><label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} /></div>
<div>
<label htmlFor="hours">Hours</label>
<input value={Math.round(minutes/60)}
id="hours"
placeholder="Hours"
type="number" /> </div>
<button onClick={reset}>Reset</button>
</div>
);
};
ReactDOM.render(<App/>, root);
</script>
</html>flipping to also convert hours into minutes
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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");
function App(){
const [minutes, setMinutes] = React.useState();
//#1 flipped is just a false / true data
//by default flipped is false, so if flipped is false then my hours should be disabled and minutes should not be disabled
const [flipped, setFlipped] = React.useState(false);
const onChange =(event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
//#2 when we click on the button Flip we are running the function onFlip which will take the current value and return the opposite value
const onFlip =() => {
reset();
setFlipped((current)=>!current)
};
return(
<div>
<h1 className="hi">Super Converter</h1>
<div><label htmlFor="minutes">Minutes</label>
<input
value={flipped ? minutes*60 :minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped} /></div>
<div>
<label htmlFor="hours">Hours</label>
<input value={flipped? minutes : Math.round(minutes/60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!flipped} /> </div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
</div>
);
//conversion should only happen when I write minutes, so if we are flipped I just want to show the current value and if we are not flipped, I want to see the converted mathround value
};
ReactDOM.render(<App/>, root);
</script>
</html>#3.9 (Final State Practice)
making a menu for the user to choose which units to convert
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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");
function MinutesToHours(){
const [minutes, setMinutes] = React.useState();
const [flipped, setFlipped] = React.useState(false);
const onChange =(event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
const onFlip =() => {
reset();
setFlipped((current)=>!current)
};
return(
<div>
<div><label htmlFor="minutes">Minutes</label>
<input
value={flipped ? minutes*60 :minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped} /></div>
<div>
<label htmlFor="hours">Hours</label>
<input value={flipped? minutes : Math.round(minutes/60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!flipped} /> </div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
</div>
);
};
function KmToMile(){
const [kilometer, setKilometer] = React.useState(0);
const onChange = (event) => {
const { value } = event.target;
setKilometer(value);
};
const [inverted, setInverted] = React.useState(true);
const reset = () => setKilometer(0);
const onInvert = () => {
reset();
setInverted((data) => !data);
};
return (
<div>
<div>
<label htmlFor="kilometer" value={kilometer}>
Kilometer
</label>
<input
type="number"
id="kilometer"
placeholder="Kilometer"
disabled={!inverted}
onChange={onChange}
value={inverted ? kilometer : kilometer / 0.62137}
/>
</div>
<div>
<label htmlFor="Mile">Mile</label>
<input
id="Mile"
type="number"
placeholder="Mile"
value={inverted ? kilometer * 0.62137 : kilometer}
onChange={onChange}
disabled={inverted}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>
{inverted ? "Invert" : "Turn back"}
</button>
</div>
);
};
//just dividing and conquering - App is rending to root div
function App(){
//#2 we know what number has been chosen and we put the value in the state by using the setIndex, the modifier function will refresh with the new data
//by default the value index is xx
const [index, setIndex] = React.useState("xx")
const onSelect = (event) => {
setIndex(event.target.value);
}
return(
//#1 we are listening to the changed event of which value the user has selected
<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" ? <KmToMile/> : null}
</div>
);
};
ReactDOM.render(<App/>, root);
</script>
</html>the output
