Utilisation de reactjs avec requirejs
Récemment, j'ai commencé à utiliser reactjs avec un routeur backbonejs pour construire une application.
J'utilise habituellement use requirejs pour la gestion des dépendances et du code. Mais, un problème se pose lorsque j'essaie d'inclure des fichiers contenant la syntaxe jsx.
C'est Ce que j'ai jusqu'à présent que mon router.js:
define(["backbone", "react"], function(Backbone, React) {
var IndexComponent = React.createClass({
render : function() {
return (
<div>
Some Stuff goes here
</div>
);
}
});
return Backbone.Router.extend({
routes : {
"": "index"
},
index : function() {
React.renderComponent(<IndexComponent />, document.getElementById('index'));
}
});
});
Comment puis-je mettre IndexComponent dans son propre fichier et l'appeler dans ce fichier ? J'ai essayé la méthode habituelle (la même que celle que j'ai utilisée avec backbone et react) mais j'ai eu une erreur due à jsx syntaxe.
2 réponses
Donc je l'ai compris moi-même.
J'ai obtenu les fichiers et instructions nécessaires de ce repo: JSX-requirejs-plugin.
Une fois que j'ai eu JSX plugin et la version modifiée de JSXTransformer , j'ai changé mon code comme indiqué dans le référentiel:
require.config({
// ...
paths: {
"react": "path/to/react",
"JSXTransformer": "path/to/JSXTransformer",
"jsx": "path/to/jsx plugin"
...
}
// ...
});
Ensuite, je pourrais référencer les fichiers JSX via la syntaxe du plugin jsx!. Par exemple, pour charger la Minuterie.fichier jsx qui se trouve dans un répertoire de composants:
require(['react', 'jsx!components/Timer'], function (React, Timer) {
...
React.renderComponent(<Timer />, document.getElementById('timer'));
...
});
Je pourrais aussi accéder aux fichiers .js qui a jsx syntaxe en utilisant le même code:
require(['react', 'jsx!components/Timer'], function (React, Timer) {
...
React.renderComponent(<Timer />, document.getElementById('timer'));
...
});
Aussi, je n'avais pas besoin de mettre /** @jsx React.DOM */ en haut des fichiers en utilisant la syntaxe jsx.
J'espère que ça aide.
Les outils React (JSX inclus) ont été dépréciés en faveur de Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). Je ne peux pas trouver un moyen de le faire sans une étape "transpiling", donc c'est ma solution avec grunt.
Vous pouvez installer grunt-babel (mnp installer grunt-babel) et configurer une tâche comme la suivante:
babel: {
options: {
sourceMap: false,
modules: "common"
},
dist: {
files: [{
expand: true,
src: ['js/components/*.jsx'],
dest: 'dist',
ext:'.js'
}]
}
}
Ajoutez-le simplement à votre liste de tâches grognantes:
grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);
Babel transpile votre JSX vers JS fichiers pouvant être spécifiés en tant que dépendances RequireJS sans configuration supplémentaire.