React CDN
React, ReactDom, Babel을 사용하기 위한 CDN이다.
/* 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>
JS를 이용하여 Counter 페이지 만들기
Btn을 클릭할 시 Total 횟수가 증가하는 Page를 JS를 이용하여 만들어보자.
Total : 0
<!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>JS</title>
</head>
<body>
<button id="btn">Click</button>
<br>
<h1 id="text">Total : 0</h1>
<script>
//Button Select
const btn = document.querySelector("#btn")
//Text Select
const text = document.querySelector("#text")
//Count 선언
let count = 0
//Button Click Event
const btnClick = () => {
count++
text.innerHTML = `Total : ${count}`
}
//Button Event 연결
btn.addEventListener("click", btnClick)
</script>
</body>
</html>
React를 이용하여 Counter 페이지 만들기
<!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">
//Counter 컴포넌트 생성
const Counter = () => {
//useState 사용하여, 변수 및 Setter 생성
const [count, setCount] = React.useState(0) //count의 기본 값 0
//onClick, count 값을 현재의 값에서 1을 더한 것으로 SET
const onClick = () => {
setCount((current) => current + 1)
}
//JSX Return
return (
<div>
<button onClick = {onClick}>Click</button>
<h1>Total : {count}</h1>
</div>
)
}
//ReactDom을 이용하여, root Div에 Counter Render
ReactDOM.render(
<Counter />, document.getElementById("root")
)
</script>
</body>
</html>'F.E > React' 카테고리의 다른 글
| [React] 함수로 props 사용하여 소문자 혹은 대문자로 바꾸기 (0) | 2022.05.05 |
|---|---|
| [React] Super Converter (0) | 2022.05.05 |
| [React] Minutes to Hours And Hours to Minutes (0) | 2022.05.04 |
| [React] 컴포넌트 빌드하기 (0) | 2022.05.02 |
| [React] create-react-app을 이용한 프로젝트 생성 (0) | 2022.05.02 |