React.js: пример в учебнике не работает

Я делаю учебник React.js из http://facebook.github.io/react/docs/tutorial.html. Вот мои файлы:

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>

и 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')
)

Но когда я открываю его в браузере, я просто вижу пустую страницу без комментариев. Что я делаю неправильно?

Ответы

Ответ 1

Chrome не позволяет загружать URL-адреса file:// через XHR (что, как упоминалось в другом месте, как работает в преобразовании браузера). У вас есть несколько вариантов:

  • Использовать другой браузер. Я знаю, что Firefox работает.
  • Запустите локальный веб-сервер (Python отправляется с одним, поэтому, если у вас это установлено очень просто - http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python).
  • Поместите script встроенную строку вместо отдельного файла. Это можно сделать для чего-то простого, но вам нужно попробовать один из других вариантов, так как ваш код становится более сложным.

Ответ 2

Следующая команда работает для меня. Но перед командой вам может потребоваться остановить процесс chrome, может быть из диспетчера задач.

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

Во-вторых, вы можете также использовать флаг - разрешить доступ к файлу в свойствах ярлыка chrome. Но это рекомендуется только для целей разработки.

Ответ 3

JSXTransformer пытается загрузить источник с помощью ajax. Это не будет работать для путей file://.

Это означает, что вы должны либо обслуживать свой небольшой проект, используя HTTP-сервер (apache, grunt connect и т.д.) ИЛИ поместить ваш источник script непосредственно в тег script.

Ответ 5

По какой-то причине локальный веб-сервер не кажется достаточным для этого в Chrome. Используя Python 3.4 и просматривая мой сайт через http://localhost:8000, я получал следующую ошибку:

Перенаправление при происхождении https://fb.me 'было заблокировано при загрузке политикой совместного использования ресурсов Cross-Origin: Нет' Access-Control-Allow Заголовок -Origin 'присутствует на запрошенном ресурсе. Происхождение http://localhost:8000 ', следовательно, не допускается.

... что странно, учитывая, что Babel script, включенный в учебник, не выдавал ту же ошибку.

Мне удалось обойти это, удалив атрибуты integrity и crossorigin в теге script, используемом для загрузки реакции и реагирования, изменив:

<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>

Ответ 6

Развернувшись на 2-м ответе Павла О'Шаннесси.

Хорошее решение:

Если у вас есть python2.x:

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

Для python3.x

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

Затем вы можете указать свой браузер на http://192.168.1.2:8000/<myfile.html> или где-нибудь, когда модуль python обслуживает ваши файлы и использует его из любого браузера без проблем.

Ответ 7

I crete JSFiddle с вашим кодом и его работой. Подумайте, попробуйте переместить ваши сценарии с head до tut.js. Кроме того, не забудьте свойство key в компоненте визуализации списка. Я добавил его к Fiddle.