React.js: Example in tutorial not working

Question

I\'m doing the React.js tutorial from http://facebook.github.io/react/docs/tutorial.html. Here are my files:

template.html:

Answer 1

The following command works for me. But before the command, you may need to stop chrome process anyhow, can be from task manager.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

Second way, you can also use --allow-file-access-from-files flag in the chrome shortcut properties. But this is recommended only for developing purpose.

Answer 2

JSXTransformer tries to load the source using ajax. This will not work for file:// paths.

This means that you should either serve your small project using a HTTP server (apache, grunt connect etc.) OR put your script source directly in the script tag.

Answer 3

For chrome, you can try to disable the origin checking, more details can be found in Disable same origin policy in Chrome. Of course, only use this for development.

Answer 4

Chrome doesn't let you load file:// urls via XHR (which as mentioned elsewhere is how the in browser transform works). You have a couple options:

• Use a different browser. I know Firefox works.
• Start a local web server (Python ships with one, so if you have that installed it's very simple - http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python).
• Put the script inline instead of in a separate file. That's doable for something simple like this but you'll want to try one of the other options as your code gets more complicated.

Answer 5

I crete JSFiddle with your code, and its work. A think, try to move your scripts from head to before tut.js. Also, don't forget key property in list render component. I added it to Fiddle.

Answer 6

Expanding on #2 from Paul O'Shannessy's answer.

The nice solution is :

If you have python2.x:

$ cd /myreact-project/htmlfiles/
$ python -m SimpleHTTPServer

For python3.x

$ cd /myreact-project/htmlfiles/
$ python -m http.server

You can then point your browser to http://192.168.1.2:8000/<myfile.html> or where ever the python module is serving your files and use it from any browser without hassles.