it-swarm.com.de

Verwenden von reactjs mit requirejs

Vor kurzem habe ich angefangen, reactjs zusammen mit einem backbonejs Router zu verwenden, um eine Anwendung zu erstellen.

Normalerweise verwende ich requirejs für die Abhängigkeits- und Codeverwaltung. Es tritt jedoch ein Problem auf, wenn ich versuche, Dateien einzuschließen, die die Syntax jsx enthalten.

Das habe ich soweit als mein 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 lege ich IndexComponent in eine eigene Datei und rufe sie in dieser Datei auf? Ich habe die übliche Methode ausprobiert (die gleiche, die ich mit Backbone und React verwendet habe), habe jedoch einen Fehler aufgrund der jsx -Syntax erhalten.

68
myusuf

Also habe ich es selbst herausgefunden.

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

Nachdem ich jsx plugin und eine geänderte 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! - Pluginsyntax 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 könnte auch auf .js - Dateien zugreifen, in denen die Syntax jsx mit demselben Code angegeben ist:

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

Außerdem musste ich /** @jsx React.DOM */ Nicht mit der jsx -Syntax am Anfang der Dateien setzen.

Ich hoffe es hilft.

98
myusuf

React Tools (JSX enthalten) wurden zugunsten von Babel verworfen ( https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html ). Ich kann keinen Weg finden, dies ohne einen "transpilierenden" 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 zu Ihrer Liste der Aufgaben hinzu:

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

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