将 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 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 */ 放在文件的顶部。

希望对你有帮助。

Answer 2

React 工具（包括 JSX）已被弃用，取而代之的是 Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)。如果没有“转译”步骤，我找不到办法做到这一点，所以这是我的 grunt 解决方案。

您可以安装 grunt-babel (npm install grunt-babel) 并配置如下任务：

babel: {
    options: {
        sourceMap: false,
        modules: "common"
    },
    dist: {
        files: [{
            expand: true,
            src: ['js/components/*.jsx'],
            dest: 'dist',
            ext:'.js'
       }]
    }
}

只需将其添加到您的 grunt 任务列表中即可：

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

Babel 会将你的 JSX 转换为 JS 文件，这些文件可以指定为 RequireJS 依赖项，无需额外配置。