React가 강력한 도구라는 것은,
vanila JS에서 모든 Event에 addEventListener을 달아 반응해야 한다면,
properties를 이용하여 이를 간단하게 구현할 수 있다는 점이다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
// HTML Element
"h3",
// properties (eg. class, id, css ...)
{
id: "title",
onMouseEnter: () => console.log('Mouse entered!'),
},
// content
"Hello I am a span"
);
const btn = React.createElement(
"button",
{
// we can implement eventLintener by properties!
onClick: () => console.log('I am clicked!'),
style: {
backgroundColor: "tomato",
}
},
"Click me"
);
const container = React.createElement(
"div",
null,
[span, btn]
);
// put container into root
ReactDOM.render(container, root);
</script>
</html>
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] render, rerender (0) | 2023.01.05 |
|---|---|
| [ReactJS] JSX 문법 (0) | 2023.01.05 |
| [ReactJS] JSX 문법과 babel 설치하기 (0) | 2023.01.05 |
| [ReactJS] React에서 Element 만들기 (0) | 2023.01.04 |
| [ReactJS] React 설치하기 (0) | 2023.01.04 |
