1

I'm trying to learn react and have this simple template from the getting started guide:

<!DOCTYPE html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.min.js"></script>
    <script type="text/babel" src="/main.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

main.js has this code:

console.log("Works!")

But this never runs. In fact, according to the devtools, it's not even being requested. Changing the type="text/babel" to text/javascript makes it run, but I can't use any JSX like that. I've also tried inlining the code and it still does not work.

ReactWonder
  • 11
  • 1

1 Answers1

1

A little dig in the chrome devtools revealed that due to CORS policy the script request for "main.js" has been blocked. To overcome this you can disable the CORS policy for chrome.

This is the screenshot from the chrome devtools

TO disable CORS policy you can follow: Disable CORS for Chrome Although it is not recommended.

Simplest thing to do is here is just use a conventional node environment to practice react.

Amey Mahajan
  • 29
  • 3
  • I have the same issue I'll try to follow the same steps and hopefully it will be solved. – tarekahf Nov 02 '22 at 05:32
  • When I use the parameter ` --disable-web-security` when starting chrome.exe, I cannot log in to the application, so I am unable to use this method. – tarekahf Nov 03 '22 at 05:31