FrontEnd/React.js

[ React.js ] Render() - 리액트 시작하기 예제

SangHoonE 2021. 8. 25. 17:32

웹페이지에 표시된 "React Start"

 

이제 코드 에디터로 React render를 하여 "React Start"를 작성하도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

    <script type="text/babel">
        const component =
        <h1>React Start</h1>; 
        const container = document.querySelector("#root");
         ReactDOM.render(component, container);
    </script>
</body>

</html>

<h1> 태그로 React Start를 입력하여 웹페이지에 출력하도록 하겠습니다.

 

root 라는 id를 가진 div를 생성하고,

스크립트/바벨로 component라는 상수에 태그 <h1>React Start</h1>를 담았습니다.

그리고 querySelector로 아까 만든 div를 찾아주시고,

ReactDOM.render(component, container) 를 작성해주어 해당 내용을 출력합니다.

 

반응형