将 reactjs 与 requirejs 一起使用 [英] Using reactjs with requirejs

问题描述

最近，我开始使用 reactjs 和 backbonejs 路由器来构建应用程序.

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

这就是我目前所拥有的 router.js:

define(["backbone", "react"], function(Backbone, React) {var IndexComponent = React.createClass({渲染:函数(){返回 (
一些东西在这里</div>);}});返回 Backbone.Router.extend({路线:{: 指数"},索引:函数(){React.renderComponent(<IndexComponent/>, document.getElementById('index'));}});});

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

解决方案

所以我自己想通了.

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

一旦我有了 jsx 插件 和 的修改版本href="https://raw.github.com/alirussell/jsx-requirejs-plugin/master/js/JSXTransformer-0.10.0.js">JSXTransformer，我按照存储库中的说明更改了代码:

require.config({//...路径:{反应":路径/到/反应"，"JSXTransformer": "路径/到/JSXTransformer",jsx":路径/到/jsx 插件"...}//...});

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

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

我还可以使用相同的代码访问具有 jsx 语法的 .js 文件:

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

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

希望对你有帮助.

Recently, I started using reactjs along with a backbonejs router to build an application.

I usually use use requirejs for dependency and code management. But, problem arises when I try to include files that contain jsx syntax.

This is what I have so far as my 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'));
    }
  });
});

How do I put IndexComponent in its own file and call it in this file ? I have tried the usual method (the same that I have used with backbone and react) but got an error due to jsx syntax.

解决方案

So I figured it out myself.

I got the necessary files and instructions from this repo: jsx-requirejs-plugin.

Once I had jsx plugin and modified version of JSXTransformer, I changed my code as instructed in the repository :

require.config({
  // ...

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

  // ...
});

Then, I could reference JSX files via the jsx! plugin syntax. For example, to load the Timer.jsx file that is in a components directory:

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

I could also access .js files that had jsx syntax in them using the same code:

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

Also, I did not need to put /** @jsx React.DOM */ at the top of files using jsx syntax.

Hope it helps.

这篇关于将 reactjs 与 requirejs 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！