본문 바로가기

리액트 기기기초

#2.3 Events in React

  • 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