javascript - 将 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 放在它自己的文件中并在此文件中调用它？我已经尝试了通常的方法(与我在 backbone 和 react 中使用的方法相同)但是由于 jsx 语法而出现错误。

Answer 1

所以我自己想通了。

我从这个存储库中获得了必要的文件和说明:jsx-requirejs-plugin .

曾经我有 jsx plugin和 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'));
   ...
});

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

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

此外，我不需要使用 jsx 语法将 /** @jsx React.DOM */ 放在文件的顶部。

希望对您有所帮助。