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

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

Источник

7 ответов

Решение

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

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

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

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" - доступ к файлам из файлов --disable-web-security

Во-вторых, вы также можете использовать флаг --allow-file-access-from-files в свойствах ярлыка chrome. Но это рекомендуется только для развивающих целей.

Источник

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

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

Источник

Для chrome вы можете попытаться отключить проверку происхождения, более подробную информацию можно найти в разделе Отключить политику происхождения в Chrome. Конечно, используйте это только для разработки.

Источник

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

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

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

Я смог обойти это, удалив 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>

Для того, чтобы:

<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>
Источник

Продолжая № 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 обслуживает ваши файлы и использовать его из любого браузера без проблем.

Источник

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

Источник
Другие вопросы по тегам