使用reactjs和requirejs

Question

最近,我开始使用reactjs连同backbonejs路由器来构建应用程序.

我通常requirejs用于依赖和代码管理.但是,当我尝试包含包含jsx语法的文件时出现问题.

到目前为止,这就是我的意思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'));
    }
  });
});

如何将IndexComponent放在自己的文件中并在此文件中调用它？我已经尝试了通常的方法(与我使用的主干和反应相同)但由于jsx语法而出错.

Answer 1

所以我自己弄清楚了.

我从这个repo获得了必要的文件和指令:jsx-requirejs-plugin.

有一次,我JSX插件和修改的版本JSXTransformer,我改变了我的代码存储库中的指示:

require.config({
  // ...

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

  // ...
});

然后,我可以通过jsx!插件语法引用JSX文件.例如,要加载组件目录中的Timer.jsx文件:

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

我也可以使用相同的代码访问.js其中包含jsx语法的文件:

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

另外,我不需要/** @jsx React.DOM */使用jsx语法放在文件的顶部.

希望能帮助到你.