고정 헤더 영역
상세 컨텐츠
본문
반응형
이제 코드 에디터로 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) 를 작성해주어 해당 내용을 출력합니다.
'FrontEnd > React.js' 카테고리의 다른 글
| [ React.js ] 에러 VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined (0) | 2021.09.01 |
|---|---|
| [ React.js ] 현재 시각 시계 만들기 예제 (0) | 2021.08.30 |
| JSX 기본 문법 - 기초 (0) | 2021.08.27 |
| [ React.js ] Render - 함수형으로 출력하자. - 예제 / 고양이 사진 출력하기 (1) | 2021.08.26 |
| [ React.js ] 시작하기 - Script태그 내에 CDN 작성하기 (0) | 2021.08.25 |
댓글 영역