使用 reactjs 和 requirejs

IT技术 javascript requirejs frontend reactjs
2021-04-17 15:50:13

最近，我开始使用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 放在它自己的文件中并在这个文件中调用它？我尝试了通常的方法（与我在主干和react中使用的方法相同）但由于jsx语法而出错。

2个回答

所以我自己想通了。

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

有一次，我JSX插件的修改版JSXTransformer，我改变了我的代码存储库中的指示：

require.config({
  // ...

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

  // ...
});

然后，我可以通过jsx!插件语法引用 JSX 文件。例如，要加载位于 components 目录中的 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语法放在文件的顶部。

希望能帮助到你。

对“我也可以使用相同的代码访问其中包含 jsx 语法的 .js 文件：”下的代码片段感到困惑。它与上面的相同。我发现如果我在 require module中使用 JSX，我也需要将同一个module制作成一个 jsx 文件（并像你说的那样使用 jsx 插件加载）。您可以更新您的样本是有点您如何组织更清晰的代码，而不是仅仅作出反应/ JSX代码。例如，您的 Timer module是什么样的？你给使用 Timer 的module起什么名字，它是如何加载 require 的？
2021-05-25 15:50:13
这个答案适合 2018 年吗？我找不到 2016 年后通过 requirejs 加载 React 的推荐方法。
2021-05-26 15:50:13
在第一种情况下，假定Timer使用jsx语法并具有.jsx扩展名。在第二种情况下，虽然代码相同，但假设Timer再次包含jsx语法但具有.js扩展名。
2021-06-03 15:50:13
不起作用，requirejs 没有下载没有错误或 404 的文件。
2021-06-09 15:50:13

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

您可以安装 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 依赖项，无需额外配置。

谢谢你的咕噜声，我已经实现了一些相同的东西，但是在我的 jsx 代码被 bablified 之后，浏览器抛出 requirejs not available 错误。你能提出一些解决方案吗？
2021-06-18 15:50:13
其它你可能感兴趣的问题
上一篇比如说 Backbone，React-Redux 应用程序真的可以扩展吗？即使重新选择。在移动 下一篇使用 ReactJS 上传文件组件