Question

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

template.html:

<html>
    <head>
        <title>Hello React</title>
        <script src="http://fb.me/react-0.8.0.js"></script>
        <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <script type="text/jsx" src='tut.js'>
        </script>
    </body>
</html>

and tut.js:

/** @jsx React.DOM */

var data = [
    {author: 'Tldr', text: 'This is a comment'}
]

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className='commentBox'>
                <h1>Comments</h1>
                <CommentList data={this.props.data} />
                <CommentForm />
            </div>
        )
    }
})

var CommentList = React.createClass({
    render: function() {
        var commentNodes = this.props.data.map(function(comment) {
                    return <Comment author={comment.author}>{comment.text}</Comment>
            })
        return (
            <div className='commentList'>
                {commentNodes}
            </div>
        )
    }
})

var CommentForm = React.createClass({
    render: function() {
        return (
            <div className='commentForm'>
                Hello World, I am a comment
            </div>
        )
    }
})

var Comment = React.createClass({
    render: function() {
        return (
            <div className='comment'>
                <h2 className='commentAuthor'>
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>
        )
    }
})

React.renderComponent(
    <CommentBox data={data} />,
    document.getElementById('content')
)

But when I open it in the browser, I just see a blank page without any comments. What am I doing wrong?

Was it helpful?

Solution

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.

OTHER TIPS

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.

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.

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.

For whatever reason a local webserver doesn't appear to be enough for this on Chrome. Using Python 3.4 and viewing my site through http://localhost:8000 I was getting the following error:

Redirect at origin 'https://fb.me' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

...which is strange considering the Babel script included in the tutorial wasn't giving the same error.

I was able to get around this by removing the integrity and crossorigin attributes on the script tag used to load react and react-dom, changing:

<script src="https://fb.me/react-0.14.7.min.js"
    integrity="sha384-zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ"
    crossorigin="anonymous"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"
    integrity="sha384-ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m"
    crossorigin="anonymous"></script>

To:

<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top