error of loading react.js in chrome

Question

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 ?

Without seeing how exactly you load that file it's not possible to answer this question. — zerkms
– zerkms, Commented Aug 3, 2016 at 7:32
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
– Benjamin Gruenbaum, Commented Aug 3, 2016 at 7:37

Majky · Accepted Answer · 2016-08-03 08:55:02Z

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.

Install NodeJS
Open node command prompt (or console if you are using Linux/OSX)
Install npm serve package npm install -g serve
From command line navigate to your starter kit folder and run serve command
In browser navigate to http://localhost:3000/

answered Aug 3, 2016 at 8:55

Majky

2,0131 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

is_january Over a year ago

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: facebook.github.io/react/docs/getting-started.html#starter-pack

Majky Over a year ago

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. stackoverflow.com/questions/23536450/…

Collectives™ on Stack Overflow

error of loading react.js in chrome

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related