반응형
index.html
<body>
<div id="container"></div>
</body>
index.js
import React from "react";
import ReactDOM from "react-dom";
import App1 from "./tutorial/01-react-is-declarative";
import App2 from "./tutorial/02-fx-component-useState";
import App3 from "./tutorial/03-fx-component-useState-sol";
import App4 from "./tutorial/04-fx-component-useEffect-didmount";
ReactDOM.render(<App4 />, document.getElementById("container"));import App1 from "./tutorial/01-react-is-declarative";
import React, { useState } from "react";
function App() {
const [scene, setScene] = useState("button");
if (scene === "button") {
return (
<button
onClick={() => setScene("question")}
style={{ backgroundColor: "blue", color: "white", padding: 10 }}
>
Show The Unicorn
</button>
);
}
if (scene === "question") {
return (
<button
onClick={() => setScene("unicorn")}
style={{ backgroundColor: "pink", padding: 10 }}
>
Are you sure?
</button>
);
}
if (scene === "unicorn") {
return (
<span onClick={() => setScene("button")} style={{ fontSize: 50 }}>
🦄
</span>
);
}
return <div>Invalid scene</div>;
}
export default App;./tutorial/02-react-is-declarative
import React from "react";
function App(props) {
let count = 1;
const handleClick = () => {
count += 1;
};
return (
<div>
<button onClick={handleClick}>Count Up</button>
<h1>
Hello, {props.name ?? "choi"} - {count}
</h1>
</div>
);
}
export default App;./tutorial/03-fx-component-useState-sol
import React, { useState } from "react";
function App(props) {
// 수정 1. let 변수가 아닌, useState hook을 사용하여 count 상태 및 setCount 선언
// let count = 1;
const [count, setCount] = useState(1);
const handleClick = () => {
// 수정 2. count 를 직접 mutate 하는 것이 아닌, setCount를 호출
// count += 1;
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>Count Up</button>
<h1>
Hello, {props.name ?? "choi"} - {count}
</h1>
</div>
);
}
export default App;
./tutorial/04-fx-component-useEffect-didmount
import React, { useState, useEffect } from "react";
function App(props) {
const [isReady, setIsReady] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsReady(true);
}, 2000);
}, []);
return (
<div>
<h1>Hello, {isReady ? "I'm Ready!" : "Waiting..."}</h1>
</div>
);
}
export default App;
https://ko.reactjs.org/docs/hello-world.html
Hello World – React
A JavaScript library for building user interfaces
ko.reactjs.org
GitHub: Let’s build from here
GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
github.com
반응형
'개발자정보' 카테고리의 다른 글
| mariadb 문자열 합치기 (0) | 2023.03.18 |
|---|---|
| Open JDK 다운로드 받는 곳, & Maria DB 원도우 환경 설치 파일 (0) | 2023.01.14 |
| Salesforce Not Exists (0) | 2022.11.13 |
| 요즘 관심있는 오픈소스 관련 사이트 정보 (0) | 2022.11.13 |
| [IDE] IntelliJ 주석 단축키 (0) | 2022.11.13 |