공식 문서 링크

---

0. Tutorial

1. div태그 id 속성 추가

<div id="like_button_container"></div>

2. React를 실행

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체해야함(압축된 js파일 사용 -> 로드 속도 상승)
참고 : https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3
3. 만든 React 컴포넌트 실행

<script src="./00_tutorial.js"></script>

---

1. Hello World

이 방식은 느려서 사용X -> JSX를 프로젝트에 추가한 방법으로 사용할 것

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

예제

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script type="text/babel">
	ReactDOM.render(
		<h1>Hello, world!</h1>,
		document.getElementById('root')
	);
</script>

---

2. JSX 소개

JSX : JavaScript를 확장한 문법. React "element" 생성
장점 : 가독성(html...), 오류 표시, 오류 검사(babel이 변환과정에서 감지)

const element = <h1>Hello, world!</h1>