<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3 id='title' onMouseEnter={() => console.log("mouse entered")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
// 컴포넌트의 첫글자는 대문자여야 한다. 소문자로 하면 html 태그로
인식해버림.
<Title /> <Button />
</div>
);
ReactDom.render(<Container />, root);
</script>
</html>브라우저가 JSX 문법을 이해할 수 있도록 babel을 임포트 해준다.
JSX 문법은 컴포넌트를 만드는 방식인데 HTML 태그를 쓰듯이 만들 수 있게 해주는 것이다.
컴포넌트를 화살표 함수 형태로 만들어주면 필요한 곳에 렌더링 할 수 있다.
이 때 만든 변수의 첫 글자는 꼭 대문자여야 브라우저가 HTML태그로 인식하지 않는다.
'취업 준비 > React' 카테고리의 다른 글
| 6. Props (0) | 2022.03.08 |
|---|---|
| 5. 컴포넌트 조합하기 (0) | 2022.03.08 |
| 4. State 예제 - 시/분 변환기 (0) | 2022.03.05 |
| 3. State와 reRendering (0) | 2022.03.04 |
| 1. JS vs React (0) | 2022.03.04 |
