chapter-04/02-react-elements/04-elements.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>

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

    const ingredients = React.createElement(
      "ul",
      { className: "ingredients" },
      items.map((ingredient, i) =>
          React.createElement("li", null, ingredient)
      )
    )

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

    console.log('ingredients', ingredients)

</script>

</body>
</html>