<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id = "mydiv"></div>
    
    <script type="text/babel">
        function Hello(){
            return <h1>Hello Hassan</h1>;
            
        }
    
        ReactDOM.render(<Hello/>, docuement.getElementById('mydiv'))
        
    </script>

 <script type="text/babel">
      function Hassan() {
        return <h1>Hello Hassan!</h1>;
      }
      
      ReactDOM.render(<Hassan />, document.getElementById('mydiv'))
    </script>

Pre-Reqs ES6

Classes
Arrow Fuctions

Class

<!DOCTYPE html>
<html>

<body>
  
<script>
class Person {
  constructor(name,age) {
    this.name = name;
    this.age =age
  }
}

const hassan = new Person("My name is Hassan and age is ",25);

document.write(hassan.name,hassan.age);
</script>

</body>
</html>

Arrow Function

function hello(){
    
    return "Hello World"
}

  File "<ipython-input-1-9e1414d86da6>", line 1
    function hello(){
             ^
SyntaxError: invalid syntax

hello =() => {
    return "Hello World"
}

# By Default

hello =() => "Hello World"

<!DOCTYPE html>
<html>

<body>

    <h1>Arrow Function</h1>

    <h2>Implicit Return</h2>

    <p>The arrow function expects a return value, and returns the value by default, without the <strong>return</strong> keyword.</p>

    <p id="demo"></p>

    <script>
    hello = () => "Hello World!";

    document.getElementById("demo").innerHTML = hello();
    </script>

</body>
</html>

<!DOCTYPE html>
<html>

  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

<body>

<h1>Arrow Function</h1>

<h2>Implicit Return</h2>

<p>The arrow function expects a return value, and returns the value by default, without the <strong>return</strong> keyword.</p>

<p id="demo"></p>

<div id ="hassan"></div>


<script>
hello = () => "Hello World!";




document.getElementById("demo").innerHTML = hello();


</script>

<script type="text/babel">
  function hass(){
      return <h1> Hi Hassan </h1>;
  }




ReactDOM.render(hass(), document.getElementById('hassan'))


</script>

</body>
</html>