使用reactjs和requirejs
最近，我开始使用reactjs和backbonejs路由器来构build一个应用程序。
我通常使用requirejs进行依赖和代码pipe理。 但是，当我尝试包含包含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语法而出现错误。
所以我自己想清楚了。
我从这个回购中得到了必要的文件和说明： jsx-requirejs-plugin 。
一旦我有jsx插件和JSXTransformer的修改版本，我按照存储库中的指示更改了我的代码：
require.config({ // ... paths: { "react": "path/to/react", "JSXTransformer": "path/to/JSXTransformer", "jsx": "path/to/jsx plugin" ... } // ... });
然后，我可以通过jsx!引用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 */放在文件的顶部。
希望能帮助到你。
React工具（包括JSX）已被弃用，以支持Babel（ https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html ）。 如果没有一个“transpiling”步骤，我找不到一个办法，所以这是我的解决scheme。
你可以安装grunt-babel（npm install grunt-babel）并configuration如下的任务：
babel: { options: { sourceMap: false, modules: "common" }, dist: { files: [{ expand: true, src: ['js/components/*.jsx'], dest: 'dist', ext:'.js' }] } }
只需将其添加到您的咕噜任务列表：
grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);
Babel会把你的JSX转换成JS文件，这些文件可以被指定为RequireJS的依赖关系，不需要额外的configuration。
