camspiers / require-jsx

A require.js plugin that allows you to use JSX files as require.js dependencies.

require-jsx

A RequireJS plugin for JavaScript files containing JSX.

It can be used to load JS source file that contain JSX code. This is helpful when using React with RequireJS.

Install

Download the plugin here

Place this in the directory that is your baseUrl for your project, or set up a paths config for it for the module ID jsx.

Usage <a name="usage".

First, you need to configure RequireJS to use Facebook's JSXTransformer which also is in React:

require.config({
    deps: ["main"],
    
    paths: {
        jsx: "../lib/jsx",
        JSXTransformer: '../lib/JSXTransformer'
    },
    
    shim: {
        JSXTransformer: {
            exports: "JSXTransformer"
        }
    }
});

Then, you can reference JSX files via the jsx! plugin syntax. For example, to load the router.js file that is in your app directory:

require(['jsx!app/router'], function (Router) {
    
});

The Plugin is then going to load the JavaScript source file app/router.js, parse it with Facebook's JSXTransformer and execute the resulting JavaScript source.