[React.js] 1. Hello World
2021. 7. 18. 01:06ㆍ개발/React.js
반응형
React.js 를 시작하기에 앞서 다른 언어와 동일하게 Hello World를 출력해봅니다.
준비물 : Atom (선호하는 Editor아무거나 상관없습니다.)
사전지식 : html, css, jacascript (vanilla JS)
1. html 예제 template 작성
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="/reactComponent/like_button.js"></script>
<div id="root"></div>
2. React script 작성
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
3. 전체 코드 및 결과
<html>
<head>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
코드를 찬찬히 보면 react를 CDN 방식으로 불러오고, React를 babel로 빌드시키기 위해 아래 세줄이 들어간 것을 볼 수 있습니다.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
body 태그안에 있는 div와 script를 자세히보면, "root" 라는 id를 통해서 넘겨 주는것처럼 보입니다~~
이부분은 다음 포스팅을 통해 자세히 다뤄보겠습니다~!
[출처] : https://ko.reactjs.org/docs/hello-world.html
Hello World – React
A JavaScript library for building user interfaces
ko.reactjs.org
반응형
'개발 > React.js' 카테고리의 다른 글
| [React.js] 0. Self Study (0) | 2021.07.19 |
|---|---|
| [React.js] 3. Element Rendering (엘리먼트 렌더링) (0) | 2021.07.19 |
| [React.js] 2. JSX란 (0) | 2021.07.18 |
| [React.js] Express ejs + React component (0) | 2018.12.31 |
| [React.js] React 시작하기 (0) | 2018.12.26 |