React 시작
-
React JS에서 element 만들고 이를 HTML에 update
-
react import : 어플리케이션이 interactive하게 동작하도록 도와주는 library
-
react-dom import : 만든 react element를 html body에 넣을 수 있도록 하는 library
-
React.createElement(a, b, c)
a : 만들 element
b : property, id나 class, 동작함수 같은 것
c : content, 내부 텍스트 같은 것
property에 eventListener같은 것도 등록 가능 -
ReactDOM.render(a, b)
react element인 a를 html 요소인 b에 보이도록 함
🖥️ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
위 코드로는 현재 사용 안함
