React functional component won't display

I've started to learn React lately and today to just memorize what i've learnt i decided to create a react component that contains a simple heading tag but i can't figure out why it won't be displayed in the browser here's my code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <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 src="include-component.js" ></script>
</body>
</html>

and this is my react component which resides in file named include-component.js :

import React from "react";
import ReactDOM from "react-dom";

function IncludeComponent() {
    return(
            <TestComponent name="Hello Wolrd"/>
    );
}

function TestComponent(props) {
    return(
     <h1>{props.name}</h1>
    );
}
const app= document.getElementById('app');
ReactDOM.render(<IncludeComponent/>,app);

can someone tell me why my component won't render ?

Solution

You are using a confusing mixture of non-compiled code and compiled code. Did you checked your console? You surely have errors guiding you...

This is for when you don't have a compiler and React and ReactDOM will be available globally:

<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>

I don't recommend you try this approach. It is sub optimal and none of the resources you will see online are using it.

Then you do this:

<script src="include-component.js"></script>

This will already cause an exception since you're using import statements inside this JS file, but you haven't said that it type="module". Normal JS files can't use import statements.

Finally you can't import React and ReactDOM like that anyway, since you imported the browser versions which just have global variables.

Instead just start a project with Create React App:

npx create-react-app my-app
cd my-app
yarn start

And start experimenting in that instead.

For completeness you would need to transform with babel:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
    <script type="text/babel">
      function IncludeComponent() {
        return(
          <TestComponent name="Hello Wolrd"/>
        );
      }

      function TestComponent(props) {
        return(
          <h1>{props.name}</h1>
        );
      }
      const container = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<IncludeComponent/>);
    </script>
</body>
</html>