REACT-STUDY/JSX-2.html at main · Solji5/REACT-STUDY · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
    <span id ="root">Hello React!</span>

</body>
<!--리액트 js 파일 가져오기-->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<!--리액트 dom js 파일 가져오기-->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const Title= () => (
    <h3 id ="title" onmouseenter={()=>console.log("mouse enter")}>
        Hello I'm a title</h3>
);

const Btn = () => (
    <button style = {{backgroundColor:"tomato",}}
    onClick{()=>console.log("im clicked")}>Click me</button>
);
const container = (<div><Title/> <Btn/> </div>);
ReactDom.render(<Container />,root);
</script>
<!--우리가 직접 만든 요소들은 모두 대문자로 시작하게 해야 한다.
    아니면 html 요소라고 생각해버릴듯-->
</html>