Son zamanlarda, reactjs backbonejs yönlendirici ile birlikte bir uygulama yapmaya başladım.

Ben genellikle bağımlılık ve kod yönetimi 6* *kullanın. Ama sorun jsx sözdizimi içeren bir dosya eklemek çalıştığınızda ortaya çıkar.

Bu benim 8 ** ben şimdiye kadar ne var:

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'));
    }
  });
});

Nasıl kendi dosyasında İndexComponent koymak ve bu dosya içinde arayayım mı ? Her zamanki yöntemi (omurga ile kullanılan ve tepki var) aynı denedim ama bir hata jsx sözdizimi nedeniyle var.

Kendim çözdüm.

Bu repo dosyalarını ve gerekli talimatları aldım: jsx-requirejs-plugin.

JSXTransformer jsx plugin ve değiştirilmiş versiyonu vardı Bir zamanlar depoyu yaklaşık Şifremi değiştirdim :

require.config({
  // ...

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

  // ...
});

Daha sonra jsx! eklenti sözdizimi ile JSX dosya referans verebilirim. Örneğin, Zamanlayıcı yüklemek için.bu bileşenleri bir dizin jsx dosyası:

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

Ayrıca jsx aynı kodu kullanarak onlardan söz ettiğini .js dosyalara ihtiyacım olabilir:

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

Ayrıca, dosyaları jsx kullanarak üst /** @jsx React.DOM */ sözdizimi koymak gerek yoktu.

Umarım yardımcı olur.