Dev/React
[React] #1. The Basic of React - Events in React
by 코딩삐약
2022. 5. 17.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- React, React DOM 코드를 import-->
<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>
//root 가져오기
const root = document.getElementById("root");
// React로 Element생성하기 - React.createElement(생성하고자하는 HTML태그, property, content(내용));
const h3 = React.createElement("h3", {id: "cool-h3", style: {color: "red"},
onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a span");
// property에 eventlistener도 넣을 수 있다.
const btn = React.createElement("button", {
onClick: () => console.log("I'm clicked"),
style: {
backgroundColor : "tomato",
}
}, "Click me");
// 2개의 컴포넌트를 가지게 할 때 array 사용
const container = React.createElement("div", null, [h3, btn]);
// span을 body안에 두기 - ReactDOM.render(대상, 위치) React element를 갖고 HTML로 만들어 배치한다.
ReactDOM.render(container, root);
</script>
</html>
