https://github.com/ericclemmons/require-jsx

A require.js plugin that allows you to use JSX files as require.js dependencies.
https://github.com/ericclemmons/require-jsx

Last synced: 8 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ericclemmons/require-jsx
• Owner: ericclemmons
• Fork: true (seiffert/require-jsx)
• Created: 2013-06-23T22:41:17.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2013-06-23T22:42:28.000Z (almost 13 years ago)
• Last Synced: 2025-10-11T04:21:36.702Z (8 months ago)
• Language: JavaScript
• Size: 96.7 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# require-jsx

A [RequireJS](http://requirejs.org) plugin for JavaScript files containing [JSX](http://facebook.github.io/react/docs/syntax.html).

It can be used to load JS source file that contain [JSX](http://facebook.github.io/react/docs/syntax.html) code.

This is helpful when using [React](http://facebook.github.io/react/index.html) with [RequireJS](http://requirejs.org).

## Install 

Download the plugin [here](https://raw.github.com/seiffert/require-jsx/master/extras/jsx.js)

Place this in the directory that is your

[baseUrl](http://requirejs.org/docs/api.html#config-baseUrl) for your project,

or set up a [paths config](http://requirejs.org/docs/api.html#config-paths)

for it for the module ID `jsx`.

## Usage 


First, you need to configure RequireJS to use Facebook's [JSXTransformer](http://fb.me/JSXTransformer-0.3.0.js) which also is 

in [React](http://facebook.github.io/react/index.html):

    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.