index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namaste React</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h1>Hello Top of ROOT</h1>
    <div id="root">
        <!-- <h1>Hello world!</h1>  it is replace render() -->
    </div>
    <h1>Hello below of ROOT</h1>
    <!-- <script>
     const root = document.getElementById("root");
     const heading = document.createElement("h1");
     heading.innerHTML= "hello world! from javascript" 
     root.appendChild(heading);
     </script> -->
<!-- 
     <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> -->

<!-- <script>
   const heading = React.createElement("h1", {}, "Hello World from React!");
   const root  = ReactDOM.createRoot(document.getElementById("root"));
   root.render(heading);
</script> -->

<script type="module" src="App.js"></script>


</body>

</html>