it-swarm.com.ru

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

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

41
tldr

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

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

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

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

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

5
Masud Shrabon

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

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

4
nooga

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

3
fantasy8

По какой-то причине локального веб-сервера недостаточно для этого в 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
James Donnelly

Расширение # 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 обслуживает ваши файлы, и использовать его из любого браузера без проблем. 

0
gideon