react script not being loaded

I have the following script:

app.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';

const App = () => (
    <Stage>
        <Sprite image="assets/baseBike.png" x={100} y={100}/>
    </Stage>
);

ReactDOM.render(<App/>, document.body);

And the following

index.html

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
<div id="stageContainer">

</div>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>

Now when I run this there is no error in the console but nothing is being rendered. I am also unable to find that my script is actually loaded.

if i remove the type="text/babel" then it throws me an error:

Cannot use import statement outside a module

Can anyone tell me what I might be missing?

Update babel

So I noticed that I was missing babel however after adding it I get the following error:

 require is not defined

Solution

when using reactjs with browser using babel you dont need to use import ,here is how i have created simple app that run with browser (note that i am not using create-react-app ): app.js

const App = () =>{
return <h1>Test App</h1>
 };
ReactDOM.render(<App/>, document.getElementById('root'));

you can use this component in index.html as

<!doctype html>
   <html>
     <head>
        <meta charset="utf-8">
          <title>Hello World</title>
      </head>

   <body>
<!-- some HTML -->
<div id="root"></div>
<!-- some other HTML -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- import react.js -->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->

<script type="text/babel" src="/app.js"></script>
<!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
  </body>
</html>

i have tested it and its worked for me ,hope it will help you