<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script>
const root = document.querySelector("#root");
const span = React.createElement(
"span", //html tag
{ id: "sexy-span", style: { color: "red"} }, // classname, id, style
"hello" // 내용
);
ReactDOM.render(span, root);
</script>
</html>
 |
React를 사용하려면 2가지 import해야한다.
1. <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
ㄴ React element를 만들 수 있게 해주는 역할
2. <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
ㄴ React element를 HTML에 두는 역할
| React.createElement("span", { id: "sexy-span", style: { color: "red"} }, "hello"); |
| #1 "span": html에 작동하는 정상적인 [tag] (ex: button, span, li ...etc) #2 {id:"sexy-span"}: classname, id,style [property영역] #3 "Hello": [내용] |
*외울필요없음 = 이렇게 작성 x
| ReactDOM.render(span, root); |
| span을 id="root" 에 위치시킨다. |
vanila js => Html 작성 후 수정
React js => js작성하여 Html 생성
반응형
'프론트엔드 > react' 카테고리의 다른 글
| React (4) - Set State, Modifier, Auto Render #2 (0) | 2023.04.18 |
|---|---|
| React (4) - Set State, Modifier, Auto Render (1) | 2023.04.18 |
| React (3) - Set State, Good React! (0) | 2023.04.18 |
| React (2) - React Event 동작 #2 (JSX) (0) | 2023.04.17 |
| React (2) - React Event 동작 #1 (0) | 2023.04.17 |
