juhahinkula/index.html

## index.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React getting started</title>
  </head>
  <body>
    <!-- Root container for react components -->
    <div id='root'></div>

    <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 src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
      function CalcSum() {
        const [sum, setSum] = React.useState(0);
        const [numbers, setNumbers] = React.useState([]);
        const [number, setNumber] = React.useState('');

        inputChanged = (event) => {
          setNumber(event.target.name);
        }

        const addNumber = () => {
          setSum(sum + number);
          setNumbers([...numbers, number]);
        }

        return (
          <div>
            <input type="number" onChange={inputChanged} />
            <button onClick={this.addNumber}>Add number</button>
            <table><tbody>
              {
                numbers.map((num) => <tr><td>{num}</td></tr>)
              }
            </tbody></table><br />
            <b>Count: {numbers.length}</b><br />
            <b>Sum: {sum}</b>
          </div>
        )
      }

      ReactDOM.render(<CalcSum />, document.getElementById('root'));
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React getting started</title>
	</head>
	<body>
	<!-- Root container for react components -->
	<div id='root'></div>

	<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 src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

	<script type="text/babel">
	function CalcSum() {
	const [sum, setSum] = React.useState(0);
	const [numbers, setNumbers] = React.useState([]);
	const [number, setNumber] = React.useState('');

	inputChanged = (event) => {
	setNumber(event.target.name);
	}

	const addNumber = () => {
	setSum(sum + number);
	setNumbers([...numbers, number]);
	}

	return (
	<div>
	<input type="number" onChange={inputChanged} />
	<button onClick={this.addNumber}>Add number</button>
	<table><tbody>
	{
	numbers.map((num) => <tr><td>{num}</td></tr>)
	}
	</tbody></table><br />
	<b>Count: {numbers.length}</b><br />
	<b>Sum: {sum}</b>
	</div>
	)
	}

	ReactDOM.render(<CalcSum />, document.getElementById('root'));
	</script>
	</body>
	</html>