dev/React

[React] 리액트의 기본형

dev_Step 2022. 11. 29. 14:11

리액트를 사용하기 위해서 react, react-dom, babel을 import 해줘야 한다.

기본적인 리액트 기본 틀은 다음과 같다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> React ! React! React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <script type="text/babel">
      
    </script>
</body>
</html>

 

 

리액트에서 화면에 출력해주기 위해서는 ReactDOM.render( 1, 2) 메서드를 사용하게 된다.

매개변수

1. 화면에 출력하고 싶은 html(jsx)

2. 해당 jsx를 렌더링 해 보여줄 DOM의 위치 

            

 보여주고자 하는 html 은  <h1>SangNamja</h1> 태그이며, 보여줄 위치는 ID=CONTAINER인 태그이다.