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?
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:
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.
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.
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.
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>
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.