react not loading external js file

Question

Why does the first example work when the jsx script is inline but the second example not work:

UPDATE: both examples work when run off a server but only the first one works when run by just clicking on hello.html from the file system.

First Example:

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type='text.jsx'>             
      ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );        
    </script>
  </body>
</html>

Second example:

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script src='hello.js' type='text/jsx'></script>
  </body>
</html>

hello.js:

 ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );

Both work for me. Are you sure your code can find `hello.js`? — symlink, Nov 29 '19 at 21:49
are you running it on a server or just clicking on the html file? — DCR, Nov 29 '19 at 21:56

ArrowHead · Answer 1 · 2019-11-29T18:01:20.387

1

I think you have a typo in src. You should correct it src=>"hello.js"

change

<script src='hello'js' type='text.jsx'></script>

to

<script src='hello.js' type='text.jsx'></script>

Additionally, your script type should be

text/babel

Maybe this will help you :

https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f

Additionally , you might want to take a lookt at this: Single React Component rendering with Babel Standalone with only index.html and Component You might have to do a few corrections.

edited Nov 29 '19 at 18:01

answered Nov 29 '19 at 16:11

ArrowHead

609
5
16

Try using type='text/babel' – ArrowHead Nov 29 '19 at 16:40
i tried that too but it doesn't work, also your link doesn't show how to add external file – DCR Nov 29 '19 at 16:50
I am only trying to help here :) Is the concept that is important to get. Saying things like `just a typo` will not help you. Nothing will work if the script is full of typos :) . I will add a few pointers, hopefully it will help. – ArrowHead Nov 29 '19 at 17:58
1

What is the error you are getting?. Are you sure the file hello.js is in the same directory? – Vishnu Dhanakotti Nov 29 '19 at 18:11

score 0 · Answer 2 · answered Feb 23 '22 at 23:28

add these scripts in your head tag. I've just solved it now

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

make sure your external js script type="text/babel"

react not loading external js file

2 Answers2