web-dev-qa-db-ja.com

React.js：チュートリアルの例が機能しない

http://facebook.github.io/react/docs/tutorial.html からReact.jsチュートリアルを行っています。私のファイルは次のとおりです。

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

しかし、ブラウザで開くと、コメントのない空白のページが表示されます。私は何を間違えていますか？

javascriptreactjs
42
tldr

Chromeではfile:// XHR経由のURL（他の場所で述べたように、ブラウザー内変換の動作方法です）。いくつかのオプションがあります：

  • 別のブラウザを使用してください。 Firefoxが動作することを知っています。
  • ローカルWebサーバーを起動します（Pythonには1つが付属しています。インストール済みの場合は非常に簡単です- http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python ）。
  • スクリプトを別のファイルではなくインラインに配置します。これは、このような単純な場合には実行可能ですが、コードが複雑になるにつれて、他のオプションのいずれかを試してください。
43
Paul O'Shannessy

次のコマンドが機能します。しかし、コマンドの前に、とにかくchromeプロセスを停止する必要がある場合があります。タスクマネージャーからでも可能です。

 "C：\ Program Files（x86）\ Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

2番目の方法として、chromeショートカットプロパティで-allow-file-access-from-filesフラグを使用することもできます。ただし、これは開発目的でのみお勧めします。

5
Masud Shrabon

JSXTransformerは、ajaxを使用してソースをロードしようとします。これはfile://パスでは機能しません。

これは、HTTPサーバー（Apache、Grunt Connectなど）を使用して小さなプロジェクトを提供する必要があることを意味しますORスクリプトソースにスクリプトソースを直接配置します。

4
nooga

Chromeでは、Originチェックを無効にできます。詳細については、 Chromeで同じOriginポリシーを無効にする を参照してください。もちろん、これは開発にのみ使用してください。

3
fantasy8

なんらかの理由で、ローカルWebサーバーではChromeでこれに十分ではないようです。 Python 3.4を使用し、http://localhost:8000次のエラーが表示されました。

Origin ' https://fb.me 'でのリダイレクトは、クロスオリジンリソース共有ポリシーによってロードがブロックされました：要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません。したがって、オリジン ' http：// localhost：80 'はアクセスを許可されません。

...チュートリアルに含まれているBabelスクリプトが同じエラーを与えていなかったことを考えると、これは奇妙です。

これを回避するには、reactおよびreact-domをロードするために使用される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

Paul O'Shannessy's answerから＃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