0

I'm trying to understand more about how React works, so I'm experimenting a bit. When I do this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
  </body>
</html>

it outputs hello world, but when I try to make the script it's own file by doing...

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="script.js">
    </script>
  </body>
</html>

script.js:

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

I get an empty page when I do it that way, any help?

momomo
  • 319
  • 1
  • 5
  • 15
  • 1
    is your script.js file in the same directory of you HTML file? – GrafiCode May 12 '21 at 10:51
  • Errors in console? – T J May 12 '21 at 10:52
  • @GrafiCode Yes it is. I double checked the name as well, I'm using VS code so it suggests the name and I only have on script file in my directory anyways – momomo May 12 '21 at 10:55
  • @TJ Access to XMLHttpRequest at 'file:///C:/Users/Muhammet/Downloads/tryreact/6668a1f6986742109c00a581ce704605-f6c882b6ae18bde42dcf6fdb751aae93495a2275/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. babel.min.js:13 GET file:///C:/Users/Muhammet/Downloads/tryreact/6668a1f6986742109c00a581ce704605-f6c882b6ae18bde42dcf6fdb751aae93495a2275/script.js net::ERR_FAILED (anonymous) @ babel.min.js:13 aX @ babel.min.js:13 – momomo May 12 '21 at 10:57
  • @TJ I get these errors. I don't undestand the meaning behind them – momomo May 12 '21 at 10:57
  • 2
    what if you change the script's source to: `src="./script.js"` – GrafiCode May 12 '21 at 10:58
  • @GrafiCode Nope. Didn't work – momomo May 12 '21 at 11:00
  • looks like `file:///` is not a trusted source. https://stackoverflow.com/questions/41965066/access-to-image-from-origin-null-has-been-blocked-by-cors-policy you might need to serve your pages on a webserver – GrafiCode May 12 '21 at 11:04
  • I would suggest, if you want to convert your existing website into SPA by using the library, then go for Vue instead of React – Himanshu Saxena May 12 '21 at 11:05
  • @GrafiCode Why would I serve my page for a simple example I'm trying to do? are you sure this is the easiest answer? – momomo May 12 '21 at 11:07
  • @HimanshuSaxena I'm trying to understand more on how react works. I'm not interested in Vue at the moment. – momomo May 12 '21 at 11:08
  • 1
    @momomo you would do that in order to have "http : // localhost/index.html" in your browser, instead of having "file:///...........". As you can see in the error you posted, `Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https` – GrafiCode May 12 '21 at 11:15
  • you are using visual studio code, this extension might be suitable: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer – GrafiCode May 12 '21 at 11:18
  • @GrafiCode It worked! If it's not too much trouble for you can you explain why it worked? I remember before being introduced to React I could add script files without getting a crossOrigin error. Does it have something to do with Babel? And how does a liveserver solves it? – momomo May 12 '21 at 11:21
  • I think it's more like a browser security feature.Trying to include external resources (images, scripts, css files) via the `file:///` protocol is not allowed anymore on firefox, chrome, edge and any other browser I guess. As for Firefox, here is an explanation from MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp – GrafiCode May 12 '21 at 11:24

0 Answers0