robertgonzales/1-helloworld.html

## 1-helloworld.html
<html>
  <head>
    <title>React Hello World</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, World!</h1>,
        document.querySelector("#app")
      )
    </script>
  </body>
</html>

## 2-calculator.html
<html>
  <head>
    <title>React Calculator</title>
    <style>
      input {
        width: 200px;
        text-align: right;
      }
      section {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
      }
      button {
        width: 25%;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        state = {
          input: ""
        }

        handleInput = e => {
          if (e.target.value === "=") {
            this.setState({ input: eval(this.state.input) })
          } else if (e.target.value === "AC") {
            this.setState({ input: "" })
          } else {
            this.setState({ input: this.state.input + e.target.value })
          }
        }

        render() {
          return (
            <div>
              <input readOnly value={this.state.input} />
              <section>
                {[
                  "AC","","%","/",
                  "7","8","9","*",
                  "4","5","6","-",
                  "1","2","3","+",
                  "0","",".","=",
                 ].map(value =>
                  <button value={value} onClick={this.handleInput}>
                    {value}
                  </button>
                )}
              </section>
            </div>
          )
        }
      }

      ReactDOM.render(
        <App />,
        document.querySelector("#app")
      )
    </script>
  </body>
</html>
	<html>
	<head>
	<title>React Hello World</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script type="text/babel">
	ReactDOM.render(
	<h1>Hello, World!</h1>,
	document.querySelector("#app")
	)
	</script>
	</body>
	</html>
	<html>
	<head>
	<title>React Calculator</title>
	<style>
	input {
	width: 200px;
	text-align: right;
	}
	section {
	width: 200px;
	display: flex;
	flex-wrap: wrap;
	}
	button {
	width: 25%;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
	class App extends React.Component {
	state = {
	input: ""
	}

	handleInput = e => {
	if (e.target.value === "=") {
	this.setState({ input: eval(this.state.input) })
	} else if (e.target.value === "AC") {
	this.setState({ input: "" })
	} else {
	this.setState({ input: this.state.input + e.target.value })
	}
	}

	render() {
	return (
	<div>
	<input readOnly value={this.state.input} />
	<section>
	{[
	"AC","","%","/",
	"7","8","9","*",
	"4","5","6","-",
	"1","2","3","+",
	"0","",".","=",
	].map(value =>
	<button value={value} onClick={this.handleInput}>
	{value}
	</button>
	)}
	</section>
	</div>
	)
	}
	}

	ReactDOM.render(
	<App />,
	document.querySelector("#app")
	)
	</script>
	</body>
	</html>