Tevinthuku/class.html

## class.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>Didact</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- we need the babel standalone transpiler here since this is just a basic html page -->
    <script src="https://unpkg.com/babel-standalone@7.0.0-beta.3/babel.min.js"></script>
    <!-- load the umd version because it sets global.tevreact -->
    <script src="../dist/tevreact.umd.js"></script>
    <!-- allow the react js preset -->
    <script type="text/babel" data-presets="react">
      /** @jsx tevreact.createElement */
      /** In the comment above we are telling babel which function it should
      use the default is React.createElement and we want to use
      our own createElement function*/
      class App extends tevreact.Component {
        constructor(props) {
          super(props);
          this.state = { movieName: "John Wick" };
        }
        render() {
          const { movieName } = this.state;
          const { userName } = this.props;

          return (
            <div>
              <h1>
                Hello {userName}, Have you watched {movieName}.
              </h1>
            </div>
          );
        }
      }
      tevreact.render(<App userName={"Tev"} />, 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>Didact</title>
	</head>
	<body>
	<div id="app"></div>
	<!-- we need the babel standalone transpiler here since this is just a basic html page -->
	<script src="https://unpkg.com/babel-standalone@7.0.0-beta.3/babel.min.js"></script>
	<!-- load the umd version because it sets global.tevreact -->
	<script src="../dist/tevreact.umd.js"></script>
	<!-- allow the react js preset -->
	<script type="text/babel" data-presets="react">
	/** @jsx tevreact.createElement */
	/** In the comment above we are telling babel which function it should
	use the default is React.createElement and we want to use
	our own createElement function*/
	class App extends tevreact.Component {
	constructor(props) {
	super(props);
	this.state = { movieName: "John Wick" };
	}
	render() {
	const { movieName } = this.state;
	const { userName } = this.props;

	return (
	<div>
	<h1>
	Hello {userName}, Have you watched {movieName}.
	</h1>
	</div>
	);
	}
	}
	tevreact.render(<App userName={"Tev"} />, document.getElementById("app"));
	</script>
	</body>
	</html>