requirejs-babel-jsx

requirejs-babel-jsx

An modern RequireJS loader plugin for JSX.

• transform JSX with Babel 6
• fully functional React demo
• supports runtime transform and the RequireJS optimizer

Getting started

Installation

Note: If you haven't installed Node.js, do it now!

Use the package manager npm (comes with Node.js) on your command line to install the plugin into your project.

$ npm install requirejs-babel-jsx

Configure RequireJS

Now you need to configure RequireJS paths for babel and jsx plugin. If you're new to RequireJS configuration options, have a look at the documentation.

requirejs.config({
  paths: {
    'babel': '../node_modules/babel-standalone/babel.min',
    'jsx': '../jsx',
    // other dependencies
    'react-dom': '../node_modules/react-dom/umd/react-dom.development',
    'react': '../node_modules/react/umd/react.development',
  }
});

After this step you can prefix your jsx dependencies with jsx! and they are transformed at runtime and in build step.

requirejs(['react-dom', 'jsx!./Paragraph'], function(ReactDOM, Paragraph) {
  ReactDOM.render(Paragraph, document.getElementById('root'));
});

Demo

You want to see it in action or what a real project with React could look like? Then run the following script in your command line and open http://localhost:3000/demo/ in your browser.

$ npm run demo

To make a build with the RequireJS optimizer (r.js) run the following script in your command line.

$ npm run build

The build file includes all dependencies, RequireJS itself and stubs the jsx plugin. To see it in action comment/uncomment the following in lines in demo/index.html.

<!--<script async data-main="main.js" src="../node_modules/requirejs/require.js"></script> -->
<script async src="main-built.js"></script>

Support

Tested with:

• RequireJS 2.3.5
• Babel 6.26.0

License

MIT