react-study/lecture3.html at master · killerdong/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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>3강 실습 소스</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const data = [
            {
                "name": "구운 연어",
                "ingredients": [
                { "name": "연어", "amount": 500, "measurement": "그램" },
                { "name": "잣", "amount": 1, "measurement": "컵" },
                { "name": "버터 상추", "amount": 2, "measurement": "컵" },
                { "name": "옐로 스쿼시(Yellow Squash, 호박의 한 종류)", "amount": 1, "measurement": "개" },
                { "name": "올리브 오일", "amount": 0.5, "measurement": "컵" },
                { "name": "마늘", "amount": 3, "measurement": "쪽" }
                ],
                "steps": [
                "오븐을 350도로 예열한다.",
                "유리 베이킹 그릇에 올리브 오일을 두른다.",
                "연어, 마늘, 잣을 그릇에 담는다.",
                "오븐에서 15분간 익힌다.",
                "옐로 스쿼시를 추가하고 다시 30분간 오븐에서 익힌다.",
                "오븐에서 그릇을 꺼내서 15분간 식힌다음에 상추를 곁들여서 내놓는다."
                ]
            },
            {
                "name": "생선 타코",
                "ingredients": [
                { "name": "흰살생선", "amount": 500, "measurement": "그램" },
                { "name": "치즈", "amount": 1, "measurement": "컵" },
                { "name": "아이스버그 상추", "amount": 2, "measurement": "컵" },
                { "name": "토마토", "amount": 2, "measurement": "개(큰것)"},
                { "name": "또띠야", "amount": 3, "measurement": "개" }
                ],
                "steps": [
                "생선을 그릴에 익힌다.",
                "또띠야 3장 위에 생선을 얹는다.",
                "또띠야에 얹은 생선 위에 상추, 토마토, 치즈를 얹는다."
                ]
            }
        ];

        const Recipe = ({name,  ingredients, steps}) => (
            <section id={name.toLowerCase().replace(/ /g, '-')}>
                <h1>{name}</h1>
                <ul className="ingredients">
                    {ingredients.map((ingredient, i) => <li key={i}>{ingredient.name}</li>)}
                </ul>
                <setion className="instructions">
                    <h2>조리절차</h2>
                    {steps.map((step, i) => <p key={i}>{step}</p>)}
                </setion>
            </section>
        );

        const Menu = (props) => (
            <article>
                <header>{props.title}</header>
                <div className='recipes'>
                    {props.recipes.map((recipe, idx) => <Recipe key={idx} {...recipe} />)}
                </div>
            </article>
        );

        ReactDOM.render(
            <Menu recipes={data} title="맛있는 조리법" />,
            document.getElementById('react-container')
        );
    </script>
</head>
<body>
    <section id="react-container"></section>
</body>
</html>