- React.createElement에 두번째 인수에 property를 줄 수 있음
- property는 id,style,classname 등등 됨
- event listener도 올 수 있음
const btn = React.createElement("button",
{
onclick: () => console.log("im clicked"),
}
, "Click me");
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hi,I am a span"
);
const btn = React.createElement("button",
{
onClick: () => console.log("im clicked"), //event listener,얘네는 앞에 on을 붙여줘야 함
style: {
backgroundColor:"tomato",
},
}
, "Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
'리액트 기기기초' 카테고리의 다른 글
#2.6 JSX part Two (0) | 2023.02.27 |
---|---|
#2.5 JSX (0) | 2023.02.27 |
#2.2 Our First React Element (0) | 2023.02.26 |
#2.1 Before React (0) | 2023.02.26 |
#2.0 Introduction (0) | 2023.02.21 |