learning-react-kor-1/chapter-04/02-react-elements/03-elements.html at master · academyitwill/learning-react-kor-1 · 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
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>리액트 엘리먼트</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>

    const dish = React.createElement("section", {id: "baked-salmon"},
                   React.createElement("h1", null, "구운 연어"),
                   React.createElement("ul",  {"className": "ingredients"},
                     React.createElement("li", null, "연어 500그램"),
                     React.createElement("li", null, "잣 1 컵"),
                     React.createElement("li", null, "버터 상추 2 컵"),
                     React.createElement("li", null, "옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개"),
                     React.createElement("li", null, "올리브 오일 1/2 컵"),
                     React.createElement("li", null, "마늘 3 쪽")
                   ),
                   React.createElement("section", {"className": "instructions"},
                     React.createElement("h2", null, "조리절차"),
                     React.createElement("p", null, "오븐을 350도로 예열한다."),
                     React.createElement("p", null,
                       "유리 베이킹 그릇에 올리브 오일을 두른다."),
                     React.createElement("p", null, "연어, 마늘, 잣을 그릇에 담는다."),
                     React.createElement("p", null, "오븐에서 15분간 익힌다."),
                     React.createElement("p", null, "옐로 스쿼시를 추가하고 다시 30분간 오븐에서 익힌다."),
                     React.createElement("p", null, "오븐에서 그릇을 꺼내서 15분간 식힌다음에 상추를 곁들여서 내놓는다.")
                   )
                 )

    ReactDOM.render(dish, document.getElementById('react-container'))

    console.log('dish element', dish)

</script>

</body>
</html>