chapter-04/03-react-components/04-components.html

<!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 IngredientsList = ({items}) =>
      React.createElement("ul", {className: "ingredients"},
        items.map((ingredient, i) =>
          React.createElement("li", { key: i }, ingredient)
        )
      )

    const items = [
      "연어 500그램",
      "잣 1 컵",
      "버터 상추 2 컵",
      "옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개",
      "올리브 오일 1/2 컵",
      "마늘 3 쪽"
    ]

    ReactDOM.render(
      React.createElement(IngredientsList, {items}, null),
      document.getElementById('react-container')
    )

</script>

</body>
</html>