Reactjs mit requirejs verwenden

71

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 .

myusuf
quelle
Frage: Müssen Sie JSX verwenden oder können Sie einfach JS in der App verwenden?
Alexander Mills
1
Das liegt ganz bei Ihnen. JSX erleichtert das Leben, aber Sie können trotzdem JS-Syntaxkomponenten verwenden. Lesen Sie hier darüber: facebook.github.io/react/docs/…
myusuf
Vielleicht möchten Sie auch return new Backbone.Router
Alexander Mills

Antworten:

102

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.

myusuf
quelle
2
Ein bisschen verwirrt über das Code-Snippet unter "Ich konnte auch mit demselben Code auf .js-Dateien zugreifen, die jsx-Syntax enthielten:". Es ist identisch mit dem darüber. Ich stellte fest, dass ich, wenn ich JSX in einem erforderlichen Modul verwendete, dasselbe Modul auch zu einer jsx-Datei machen musste (und mit dem jsx-Plugin laden musste, wie Sie sagten). Könnten Sie Ihr Beispiel aktualisieren, um etwas klarer zu machen, wie Sie Ihren Code organisiert haben , als nur den React / JSX-Code? Wie sieht beispielsweise Ihr Timer-Modul aus? Welchen Namen geben Sie dem Modul, das Timer verwendet, und wie wird es mit require geladen?
Killthrush
1
Im ersten Fall wird angenommen , dass TimerAnwendungen jsxSyntax und a - .jsxErweiterung. In der zweiten Instanz wird angenommen, dass der Code zwar identisch ist, aber Timerwieder jsxSyntax enthält, aber eine .jsErweiterung hat.
Myusuf
Funktioniert nicht, requirejs lädt die Dateien nicht ohne Fehler oder 404s herunter.
RoninCoder
Ist diese Antwort für 2018 angemessen? Ich kann den empfohlenen Weg zum Laden von React via requirejs nach 2016 nicht finden.
elimisteve
3

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.

Rocío García Luque
quelle
Vielen Dank für das Grunzen, ich habe etwas das gleiche implementiert, aber nachdem mein jsx-Code bablifiziert ist, wirft der Browser einen nicht verfügbaren Fehler aus. Können Sie eine Lösung vorschlagen?
SG28