01. React JS, ReactDOM 코드를 import하기
React 파일은 컴포넌트를 담당.
React DOM 파일은 실제 DOM에 렌더링을 담당.
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>- body 이후에 위치
02. ReactDOM.render();
React element들을 html내부에서 보여줌
ReactDOM.render(<Container/>, root);03. JSX파일 babel을 이용해 변환해주기
React JSX: JavaScript언어의 확장. JavaScript에서 HTML형식을 그대로 사용할 수 있게 하는 등 XML과 같은 문법을 native JavaScript로 변환해줌.
Babel: 자바스크립트 컴파일러. 여러가지 브라우저를 지원하기 위해 ES6로 작성된 코드를 ES5로 변환해줌.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>이때, 우리가 코드를 넣는 script파일 type을 text/babel로 설정해줘야 에러가 나지 않는다.
04. 컴포넌트의 첫글자는 무조건 대문자
컴포넌트는 자바스크립트 클래스. 참조 시 <컴포넌트명/>형식으로 쓰임. 소문자로 쓰면 div나 span 같은 HTML 태그로 해석되기 때문에 반드시 대문자로 시작해야함.
TIL
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello i'm a span
</h3>
);
}
const Button = () => (
<button
style={{backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = () => ( // 이 부호는 function하고 괄호 열고 return 하는 것과 같은 의미
<div>
<Title/>
<Button/>
</div>
);
ReactDOM.render(<Container/>, root);
</script>
💻 Hello world