leahpjoyce/demo2.html

## demo2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>First React App</title>
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>

  <body>
   <div id= 'app'></div>
<!--    <h1 id='header'>Hello World</h1>-->

   <script>
       const name = 'Leah'
       const handle = '@leahp'

    function NameComponent (props) {
      return React.createElement(
      'h1',
      null,
      props.name,
      )
    }

    function HandleComponent (props) {
      const handleElement = React.createElement(
      'h2',
      null,
      props.handle,
      )
    }

      const wrapperElement = React.createElement(
      'div',
      { id: 'container'},
       React.createElement(NameComponent, { name: 'Leah' }),
       React.createElement(HandleComponent, { handle: '@leahp' }),
      )

       ReactDOM.render(
       wrapperElement,
       document.getElementById('app')
       )
   </script>
  </body>
</html>

## demo3.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>First React App</title>
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 </head>

  <body>
   <div id= 'app'></div>
<!--    <h1 id='header'>Hello World</h1>-->

   <script type="text/babel">
       const name = 'Leah'
       const handle = '@leahp'

    function NameComponent (props) {
        return <h1>{props.name}</h1>
    }

    function HandleComponent (props) {
        return <h2>{props.handle}</h2>
    }

    function App() {
        return (
        <div id='container'>
            <NameComponent name= {name} />
            <HandleComponent handle={handle} />
       </div>

        )
    }


       ReactDOM.render(
       <App />,
       document.getElementById('app')
       )
   </script>
  </body>
</html>

## react-bootcamp-1.html
<!DOCTYPE html>
<html>
<head>
  <title>React</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
  <div id='app'></div>
  <script>
    const headerElement = React.createElement(
      'h1',
      { id: 'header' },
      'Tyler'
    )

    ReactDOM.render(
      headerElement,
      document.getElementById('app')
    )
  </script>
</body>
</html>

## react-bootcamp-demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>First React App</title>
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>

  <body>
   <div id= 'app'></div>
<!--    <h1 id='header'>Hello World</h1>-->

   <script>
       const name = 'Leah'
       const handle = '@leahp'

      const nameElement = React.createElement(
      'h1',
      null,
      name
      )

      const handleElement = React.createElement(
      'h2',
      null,
      handle
      )

      const wrapperElement = React.createElement(
      'div',
      { id: 'container'},
       nameElement,
       handleElement
      )

       ReactDOM.render(
       wrapperElement,
       document.getElementById('app')
       )
   </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>First React App</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	</head>

	<body>
	<div id= 'app'></div>
	<!-- <h1 id='header'>Hello World</h1>-->

	<script>
	const name = 'Leah'
	const handle = '@leahp'

	function NameComponent (props) {
	return React.createElement(
	'h1',
	null,
	props.name,
	)
	}

	function HandleComponent (props) {
	const handleElement = React.createElement(
	'h2',
	null,
	props.handle,
	)
	}

	const wrapperElement = React.createElement(
	'div',
	{ id: 'container'},
	React.createElement(NameComponent, { name: 'Leah' }),
	React.createElement(HandleComponent, { handle: '@leahp' }),
	)

	ReactDOM.render(
	wrapperElement,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>React</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	</head>
	<body>
	<div id='app'></div>
	<script>
	const headerElement = React.createElement(
	'h1',
	{ id: 'header' },
	'Tyler'
	)

	ReactDOM.render(
	headerElement,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>