web-dev-qa-db-fra.com

React.js: Exemple dans le tutoriel ne fonctionne pas

Je fais le didacticiel React.js de http://facebook.github.io/react/docs/tutorial.html . Voici mes fichiers:

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>

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

Mais lorsque je l'ouvre dans le navigateur, je ne vois qu'une page vierge sans aucun commentaire. Qu'est-ce que je fais mal?

javascriptreactjs
41
tldr

Chrome ne vous permet pas de charger des URL file:// via XHR (ce qui, comme mentionné ailleurs, décrit le fonctionnement de la transformation dans le navigateur). Vous avez plusieurs options:

  • Utilisez un autre navigateur. Je sais que Firefox fonctionne.
  • Démarrez un serveur Web local (Python est livré avec un, donc si vous l'avez installé, c'est très simple - http://www.linuxjournal.com/content/tech-tip-really-simple-serveur-python ).
  • Mettez le script en ligne au lieu de dans un fichier séparé. C'est faisable pour quelque chose de simple comme celui-ci, mais vous aurez envie d'essayer l'une des autres options au fur et à mesure que votre code se complique.
42
Paul O'Shannessy

La commande suivante fonctionne pour moi. Mais avant la commande, vous devrez peut-être arrêter le processus Chrome de toute façon, cela peut provenir du gestionnaire de tâches.

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

Deuxièmement, vous pouvez également utiliser --allow-file-access-from-files flag dans les propriétés du raccourci chrome. Mais cela n’est recommandé que dans un but de développement.

5
Masud Shrabon

JSXTransformer tente de charger le source en utilisant ajax. Cela ne fonctionnera pas pour les chemins file://.

Cela signifie que vous devez soit servir votre petit projet en utilisant un serveur HTTP (Apache, Grunt Connect, etc.) OR, placez votre source de script directement dans la balise script.

4
nooga

Pour Chrome, vous pouvez essayer de désactiver la vérification de l'origine. Pour plus d'informations, consultez Désactiver la même stratégie d'origine dans Chrome . Bien sûr, utilisez-le uniquement pour le développement.

3
fantasy8

Pour une raison quelconque, un serveur Web local ne semble pas être suffisant pour cela sur Chrome. En utilisant Python 3.4 et en consultant mon site via http://localhost:8000, l'erreur suivante apparaissait:

La stratégie de partage des ressources d'origine croisée a bloqué le redirection de la redirection à l'origine ' https://fb.me ': aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 8000 ' n'est donc pas autorisé.

... ce qui est étrange compte tenu du script Babel inclus dans le didacticiel qui ne donnait pas la même erreur.

J'ai pu résoudre ce problème en supprimant les attributs integrity et crossorigin de la balise script utilisée pour charger react et react-dom, en modifiant:

<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

Développant le # 2 de Paul O'Shannessy réponse.

La solution de Nice est:

Si vous avez python2.x:

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

Pour python3.x

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

Vous pouvez ensuite indiquer à votre navigateur http://192.168.1.2:8000/<myfile.html> ou à tout endroit où le module python sert vos fichiers et l'utiliser depuis n'importe quel navigateur sans tracas. 

0
gideon