davidhartsough · January 28, 2020 00:28
diff --git a/react.html b/react.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1, initial-scale=1, shrink-to-fit=no"
    />
    <title>It's React Time!</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />
    <style>
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Helvetica Neue", Arial, sans-serif;
        background-color: #fafafa;
      }
      main {
        margin: 0 auto 4rem;
        max-width: 42rem;
        padding: 1rem;
      }
      h1,
      p {
        margin: 0 0 0.5rem 0;
      }
      h1 {
        font-size: 2.5rem;
        font-weight: 300;
      }
      p {
        font-weight: 400;
      }
      label {
        display: block;
        margin: 0.75rem 0;
      }
      input {
        display: block;
        height: 2rem;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        padding: 0.25rem 0.5rem;
        outline: none;
        width: 100%;
        margin: 0.25rem 0;
      }
      input:focus {
        border-color: #146eeb;
      }
      button {
        display: inline-block;
        cursor: pointer;
        padding: 0.5rem 0.75rem;
        font-weight: 500;
        font-size: 1rem;
        letter-spacing: 0.025rem;
        border: none;
        border-radius: 0.25rem;
        border: 1px solid #aaa;
        background-color: transparent;
        color: #444;
        outline: none;
        text-decoration: none;
        user-select: none;
        width: auto;
        height: auto;
      }
      button:hover,
      button:focus {
        border-color: #555;
        color: #000;
      }
      button:disabled {
        background: #f0f0f0;
        cursor: not-allowed;
        color: #aaa;
        border-color: #ccc;
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <main id="root"></main>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
    <script type="text/babel">
      function App() {
        return (
          <p>WOW! This is a neat component.</p>
        );
      }
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta
	name="viewport"
	content="width=device-width, minimum-scale=1, initial-scale=1, shrink-to-fit=no"
	/>
	<title>It's React Time!</title>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
	/>
	<style>
	html {
	box-sizing: border-box;
	}
	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}
	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
	"Helvetica Neue", Arial, sans-serif;
	background-color: #fafafa;
	}
	main {
	margin: 0 auto 4rem;
	max-width: 42rem;
	padding: 1rem;
	}
	h1,
	p {
	margin: 0 0 0.5rem 0;
	}
	h1 {
	font-size: 2.5rem;
	font-weight: 300;
	}
	p {
	font-weight: 400;
	}
	label {
	display: block;
	margin: 0.75rem 0;
	}
	input {
	display: block;
	height: 2rem;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	outline: none;
	width: 100%;
	margin: 0.25rem 0;
	}
	input:focus {
	border-color: #146eeb;
	}
	button {
	display: inline-block;
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.025rem;
	border: none;
	border-radius: 0.25rem;
	border: 1px solid #aaa;
	background-color: transparent;
	color: #444;
	outline: none;
	text-decoration: none;
	user-select: none;
	width: auto;
	height: auto;
	}
	button:hover,
	button:focus {
	border-color: #555;
	color: #000;
	}
	button:disabled {
	background: #f0f0f0;
	cursor: not-allowed;
	color: #aaa;
	border-color: #ccc;
	}
	</style>
	</head>
	<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<main id="root"></main>
	<script src="https://unpkg.com/react/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
	<script type="text/babel">
	function App() {
	return (
	<p>WOW! This is a neat component.</p>
	);
	}
	ReactDOM.render(<App />, document.getElementById("root"));
	</script>
	</body>
	</html>