Using reactjs with requirejs

Question

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.

Answer 1

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.