- jsx
- 자바스크립트를 확장한 문법
- html에서 사용한 문법과 흡사한 문법을 사용하여 리액트 요소를 만듦
- Babel
- jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<!-- ReactDom이 react element를 가져다 놓을 곳 -->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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");
const Title = <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>나는 타이틀</h3>
const Button = (
<button
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
) //여기가 jsx임, html과 유사함
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>
