Vor kurzem habe ich angefangen, reactjs
zusammen mit einem backbonejs
Router eine Anwendung zu erstellen.
Normalerweise verwende ich die Verwendung requirejs
für die Abhängigkeits- und Codeverwaltung. Ein Problem tritt jedoch auf, wenn ich versuche, Dateien einzuschließen, die jsx
Syntax 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 jsx
Syntax einen Fehler erhalten .
javascript
requirejs
frontend
reactjs
myusuf
quelle
quelle
Antworten:
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
.js
Dateien mitjsx
Syntax zugreifen :require(['react', 'jsx!components/Timer'], function (React, Timer) { ... React.renderComponent(<Timer />, document.getElementById('timer')); ... });
Außerdem musste ich keine
/** @jsx React.DOM */
Dateien mitjsx
Syntax an die Spitze der Dateien setzen .Ich hoffe es hilft.
quelle
Timer
Anwendungenjsx
Syntax und a -.jsx
Erweiterung. In der zweiten Instanz wird angenommen, dass der Code zwar identisch ist, aberTimer
wiederjsx
Syntax enthält, aber eine.js
Erweiterung hat.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.
quelle