0

I am new in React learning. I've just donwloaded Starter Kit 15.3.0 from this site: https://facebook.github.io/react/docs/getting-started.html

I'm using chrome browser. When trying to include a separate js file into html page like
https://facebook.github.io/react/docs/getting-started.html#separate-file
says, the chrome reports an error: 

XMLHttpRequest cannot load file:///C:/Users/jxu200/Desktop/react-15.3.0/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I noticed that it is mentioned by react team that:

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served 
via HTTP.

my question is: why 

react.js/react-dom.js/react-dom-server.js/react-with-addons.js,

all js files in the /build folder can be loaded without a problem, but js files created by myself cannot be loaded normally ? even if I place my js file in the /build folder ? What does chrome actually do when loading react.js codes ?

is_january
  • 57
  • 5
  • Without seeing how exactly you load that file it's not possible to answer this question. – zerkms Aug 03 '16 at 07:32
  • 2
    Files loaded as script tags are not susceptible to the same origin policy (read on what that is). You should be using a static HTTP development server – Benjamin Gruenbaum Aug 03 '16 at 07:37

1 Answers1

1

You need some development server as pointed up in comments. You can use webpack for larger projects but for running just examples you should be fine with simple serve npm package.

  1. Install NodeJS
  2. Open node command prompt (or console if you are using Linux/OSX)
  3. Install npm serve package npm install -g serve
  4. From command line navigate to your starter kit folder and run serve command
  5. In browser navigate to http://localhost:3000/
Majky
  • 1,943
  • 1
  • 18
  • 30
  • Then why all examples in the Starter Kit 15.3.0 do not need a server ? The Starter Kit 15.3.0 source is from here: https://facebook.github.io/react/docs/getting-started.html#starter-pack – is_january Aug 03 '16 at 09:16
  • As you already pointed out note from react team, if you open file directly then you are using file protocol and some browsers will not load scripts that way. Therefore you need HTTP server. http://stackoverflow.com/questions/23536450/cant-open-angular-app-using-file-protocol-in-chrome – Majky Aug 03 '16 at 09:26