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 depe

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(, 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(, document.getElementById('timer'));
   ...
});

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

Hope it helps.