houhr/React example.html

## React example.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> <title>Pure React Samples</title> </head>
  <body>
    <!-- Target Container -->
    <div id="react-container"></div>

    <!-- React, React DOM & Babel-->
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

    <script type="text/babel">

      var data = [
        {
          "name": "Baked Salmon",
          "ingredients": [
            { "name": "Salmon", "amount": 1, "measurement": "l lb" },
            { "name": "Pine Nuts", "amount": 1, "measurement": "cup" },
            { "name": "Butter Lettuce", "amount": 2, "measurement": "cups" },
            { "name": "Yellow Squash", "amount": 1, "measurement": "med" },
            { "name": "Olive Oil", "amount": 0.5, "measurement": "cup" },
            { "name": "Garlic", "amount": 3, "measurement": "cloves" }
          ],
          "steps": [
            "Preheat the oven to 350 degrees.",
            "Spread the olive oil around a glass baking dish.",
            "Add the salmon, Garlic, and pine nuts to the dish",
            "Bake for 15 minutes.",
            "Add the Butternut Squash and put back in the oven for 30 mins.",
            "Remove from oven and let cool for 15 minutes. Add the lettuce and serve."
          ]
        },
        {
          "name": "Fish Tacos",
          "ingredients": [
            { "name": "Whitefish", "amount": 1, "measurement": "l lb" },
            { "name": "cheese", "amount": 1, "measurement": "cup" },
            { "name": "Iceberg Lettuce", "amount": 2, "measurement": "cups" },
            { "name": "Tomatoes", "amount": 2, "measurement": "large"},
            { "name": "Tortillas", "amount": 3, "measurement": "med" }
          ],
          "steps": [
            "Cook the Fish on the Grill until Hot",
            "Place the fish on the 3 tortillas",
            "Top them with lettuce, tomatoes, and cheese"
          ]
        }
      ]

      const Recipe = ({name, ingredients, steps}) => (
        <section id={name.toLowerCase().replace(/ /g, '-')}>
          <h1>{name}</h1>
          <ul className='ingredients'>
            {ingredients.map((ingredient, i) =>
              <li key={i}><p>{`${ingredient.name}: ${ingredient.amount} ${ingredient.measurement}`}</p></li>
            )}
          </ul>
          <section className='instructions'>
            <h2>Cooking Instructions</h2>
            {steps.map((step, i)=>
              <p key={i}>{step}</p>
            )}
          </section>
        </section>
      )

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

      ReactDOM.render(
        <Menu title="Delicious Recipes" recipes={data} />,
        document.getElementById('react-container')
      )

    </script>

  </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"> <title>Pure React Samples</title> </head>
	<body>
	<!-- Target Container -->
	<div id="react-container"></div>

	<!-- React, React DOM & Babel-->
	<script src="https://unpkg.com/react@15/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

	<script type="text/babel">

	var data = [
	{
	"name": "Baked Salmon",
	"ingredients": [
	{ "name": "Salmon", "amount": 1, "measurement": "l lb" },
	{ "name": "Pine Nuts", "amount": 1, "measurement": "cup" },
	{ "name": "Butter Lettuce", "amount": 2, "measurement": "cups" },
	{ "name": "Yellow Squash", "amount": 1, "measurement": "med" },
	{ "name": "Olive Oil", "amount": 0.5, "measurement": "cup" },
	{ "name": "Garlic", "amount": 3, "measurement": "cloves" }
	],
	"steps": [
	"Preheat the oven to 350 degrees.",
	"Spread the olive oil around a glass baking dish.",
	"Add the salmon, Garlic, and pine nuts to the dish",
	"Bake for 15 minutes.",
	"Add the Butternut Squash and put back in the oven for 30 mins.",
	"Remove from oven and let cool for 15 minutes. Add the lettuce and serve."
	]
	},
	{
	"name": "Fish Tacos",
	"ingredients": [
	{ "name": "Whitefish", "amount": 1, "measurement": "l lb" },
	{ "name": "cheese", "amount": 1, "measurement": "cup" },
	{ "name": "Iceberg Lettuce", "amount": 2, "measurement": "cups" },
	{ "name": "Tomatoes", "amount": 2, "measurement": "large"},
	{ "name": "Tortillas", "amount": 3, "measurement": "med" }
	],
	"steps": [
	"Cook the Fish on the Grill until Hot",
	"Place the fish on the 3 tortillas",
	"Top them with lettuce, tomatoes, and cheese"
	]
	}
	]

	const Recipe = ({name, ingredients, steps}) => (
	<section id={name.toLowerCase().replace(/ /g, '-')}>
	<h1>{name}</h1>
	<ul className='ingredients'>
	{ingredients.map((ingredient, i) =>
	<li key={i}><p>{`${ingredient.name}: ${ingredient.amount} ${ingredient.measurement}`}</p></li>
	)}
	</ul>
	<section className='instructions'>
	<h2>Cooking Instructions</h2>
	{steps.map((step, i)=>
	<p key={i}>{step}</p>
	)}
	</section>
	</section>
	)

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

	ReactDOM.render(
	<Menu title="Delicious Recipes" recipes={data} />,
	document.getElementById('react-container')
	)

	</script>

	</body>
	</html>