#2.2 Our First React Element

React

#2.2 Our First React Element

김예나 2023. 2. 26. 22:43

react-js : 엔진과 같음, 상호작용할 수 있는 UI를 만들게 해줌
react-dom : reactElement를 html에 는 역할
render : react element를 거치고 html로 만들어 배치한다는 것, 사용자에게 보내줌
react는 모든 것이 js로부터 시작됨, 마지막에 html로 끝남, 바닐라js와 정반대의 순서

<!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 span = React.createElement(
        "span",
        {id:"cute-span", style:{color:"red"}},
         "Hi,I am a span"
        ); //js를 이용해 element생성
    ReactDOM.render(span, root); //react가 html로 변경
</script>

</html>