CS Study/React
2. JSX
Ryannn
2022. 4. 15. 22:23
1. 브라우저가 JSX를 babel로 번역해서 JS로 알아듣게 하기
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<span id = "count"></span>
<span id = "show"></span>
<script type = "text/babel">
let n = 0;
const count = document.getElementById("count");
const show = document.getElementById("show");
const button = (
<button onClick = {() => show.innerText = ++n}>
Click!
</button>
); //JSX로 작성
/*const button = React.createElement(
"button",
{
onClick : ()=>show.innerText = ++n
},
"Click!"
)*/ //babel이 번역한 코드
ReactDOM.render(button,count);
</script>
</body>
</html>//JSX로 작성
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id = "root"></div>
<script type = "text/babel">
const root = document.getElementById("root");
const Title = () => (<span>Hello I'm a title</span>)
const Button = () => (
<button
style = {{
color : "red"
}}
onClick = {() => console.log("I'm Clicked!")}>
Click Me!
</button>
)
const Container = () => (
<div>
<Title />
<Button />
</div>
)
ReactDOM.render(<Container />,root)
</script>
</body>
</html>