web-dev-qa-db-fra.com

Utilisation de reactjs avec requirejs

Récemment, j'ai commencé à utiliser reactjs avec un routeur backbonejs pour créer une application.

J'utilise habituellement requirejs pour la gestion des dépendances et du code. Mais, le problème se pose lorsque j'essaie d'inclure des fichiers contenant la syntaxe jsx.

C'est ce que j'ai jusqu'à présent en tant 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 que j'ai réagi), mais une erreur est survenue en raison de la syntaxe jsx.

javascriptrequirejsfrontendreactjs
68
myusuf

Alors je l'ai compris moi-même.

J'ai obtenu les fichiers nécessaires et les instructions de ce référentiel: jsx-requirejs-plugin .

Une fois que j'avais plugin jsx 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 faire référence à des fichiers JSX via le jsx! syntaxe du plugin. Par exemple, pour charger le fichier Timer.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 pouvais aussi accéder à .js fichiers contenant la syntaxe jsx avec le même code:

require(['react', 'jsx!components/Timer'], function (React, Timer) {
   ...
   React.renderComponent(<Timer />, document.getElementById('timer'));
   ...
});

De plus, 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.

98
myusuf

Les outils de réaction (JSX inclus) sont déconseillé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 faire cela sans une étape de "transpiling", c'est donc ma solution avec grunt.

Vous pouvez installer grunt-babel (npm installer grunt-babel) et configurer une tâche comme celle-ci:

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 difficiles:

grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);

Babel va transpiler vos fichiers JSX en fichiers JS pouvant être spécifiés en tant que dépendances RequireJS sans configuration supplémentaire.

2
Rocío García Luque