function-class.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Second React App</title>
  </head>
  <body>

    <div id="app"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

    <script type="text/babel">

      const elementFun = (
        <h1>
          This is a functional component.
        </h1>
      );

      function TypeFun() {
        return elementFun;
      }

      class TypeCla extends React.Component {
        render() {
          const headStyle = {
            color:"green"
          }
          return <h1 style={headStyle}>This is a class component.</h1>;
        }
      }

      class App extends React.Component {
        render() {
          return (
            <div>
              <TypeFun />
              <TypeCla />
            </div>
          );
        }
      }

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