React - component in seperate script does not work

Question

I'm trying to learn react.js, but got stuck on "Hello World" script.

My index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/helloworld.js"></script>
  </body>
</html>

and src/helloworld.js:

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

When I put this code inside <script> in index.html file it works fine, but when I move it to seperate file I get blank page, and console error:

XMLHttpRequest cannot load file:///home/marcin/Projects/react/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

What is wrong with it?

Cristik · Accepted Answer · 2015-05-13 05:01:39Z

9

You get that error because:

You have loaded the index.html from your local file system (e.g. by double clicking on it), instead of loading it via a web server
The JSX transformer, the one responsible of text/jsx scripts is a javascript component that tries to fetch the file specified by the src attribute of the script tag
Javascript is allowed to fetch external resources only from the protocols enumerated in the error message (and even for those has further limitation like cross-domain requess); files loaded from the local file system have the file:// protocol which is not within that list.

When you included the jsx script in the index.html file it worked as no requests were needed in order to retrieve the jsx script.

What you need to do is grab your hands on a web server, place the hello world files into the document root of that server, and load them from the web server, e.g. from an URL like http://localhost/index.html.

edited May 13, 2015 at 5:01

answered May 12, 2015 at 20:50

Cristik

33.2k26 gold badges106 silver badges143 bronze badges

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

2 Comments

raquelhortab Over a year ago

is there any way to solve this without needing a server? I see many answers saying you need a server but the questions are usually about being able to run the js code in the browser. if I wanted, for instance, to include the result of a project created with create-react-app as a static page in another project, not a whole app

Cristik Over a year ago

@raquelhortab if you can get past issue #3 from my answer, then you might be able to get away without a server

Ali Gajani · Accepted Answer · 2015-05-12 19:48:23Z

8

I suggest you boot up a web server.

This python -m SimpleHTTPServer will boot up a simple web server.

You can run this in your directory. Access it here http://localhost:8000.

Or, you can use Chrome flags and add this line --allow-file-access-from-files

Notes

Python come pre-packaged with an OSX installation, so if you're on a Mac, good.
Chrome flags is not recommended as it is tedious of a process.

answered May 12, 2015 at 19:48

Ali Gajani

15.1k12 gold badges64 silver badges106 bronze badges

1 Comment

Bobur Over a year ago

Python 3 syntaxis would be helpful as well: python3 -m http.server [PORT]

Kapil · Accepted Answer · 2017-09-08 06:32:31Z

1

I know the answer is already approved but for reference I post code here. We can use react.js with script task like this

<!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

answered Sep 8, 2017 at 6:32

Kapil

8965 silver badges14 bronze badges

Collectives™ on Stack Overflow

React - component in seperate script does not work

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related