Reactjs mit requirejs verwenden

Vor kurzem habe ich angefangen, reactjszusammen mit einem backbonejsRouter eine Anwendung zu erstellen.

Normalerweise verwende ich die Verwendung requirejsfür die Abhängigkeits- und Codeverwaltung. Ein Problem tritt jedoch auf, wenn ich versuche, Dateien einzuschließen, die jsxSyntax enthalten .

Dies ist, was ich soweit habe 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'));
    }
  });
});

Wie füge ich IndexComponent in eine eigene Datei ein und rufe sie in dieser Datei auf? Ich habe die übliche Methode ausprobiert (die gleiche, die ich mit Backbone verwendet habe und reagiere), habe aber aufgrund der jsxSyntax einen Fehler erhalten .

Also habe ich es selbst herausgefunden.

Ich habe die notwendigen Dateien und Anweisungen von diesem Repo erhalten: jsx-requirejs-plugin .

Nachdem ich das JSX-Plugin und die modifizierte Version von JSXTransformer hatte , änderte ich meinen Code wie im Repository angegeben:

require.config({
  // ...

  paths: {
    "react": "path/to/react",
    "JSXTransformer": "path/to/JSXTransformer",
    "jsx": "path/to/jsx plugin"
    ...
  }

  // ...
});

Dann könnte ich über die jsx!Plugin-Syntax auf JSX-Dateien verweisen . So laden Sie beispielsweise die Datei Timer.jsx, die sich in einem Komponentenverzeichnis befindet:

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

Ich konnte auch mit demselben Code auf .jsDateien mit jsxSyntax zugreifen :

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

Außerdem musste ich keine /** @jsx React.DOM */Dateien mit jsxSyntax an die Spitze der Dateien setzen .

Ich hoffe es hilft.

Reaktionstools (einschließlich JSX) wurden zugunsten von Babel abgelehnt ( https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html ). Ich kann keinen Weg finden, dies ohne einen "Transpiling" -Schritt zu tun, also ist dies meine Lösung mit Grunzen.

Sie können grunt-babel installieren (npm install grunt-babel) und eine Aufgabe wie die folgende konfigurieren:

babel: {
    options: {
        sourceMap: false,
        modules: "common"
    },
    dist: {
        files: [{
            expand: true,
            src: ['js/components/*.jsx'],
            dest: 'dist',
            ext:'.js'
       }]
    }
}

Fügen Sie es einfach Ihrer Liste der Grunzaufgaben hinzu:

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

Babel transpiliert Ihre JSX in JS-Dateien, die ohne zusätzliche Konfiguration als RequireJS-Abhängigkeiten angegeben werden können.