UPDATE: Now that we have Babel using the JSXTransformer script is probably not necessary.

TL;DR

For using React with JSX in CodePen (where you want to use the JS editor), link up these three scripts in this order:

  1. Script that makes JSX Work on CodePen: https://codepen.io/chriscoyier/pen/yIgqi.js
  2. React: http://fb.me/react-0.11.1.js
  3. JSX Transformer: http://fb.me/JSXTransformer-0.11.0.js

And you should be good to go.

Backstory

React is a JavaScript library by the team at Facebook. Without getting too deep here (I'm not really qualified for that anyway) React is in the same vein as Angular, Ember, Meteor, and that kind of thing. Data binding in the DOM, stateful components, etc.

There is a part of React called JSX, which is like an alternate syntax for React where you use HTML elements right in the JavaScript, angle brackets and all. Like:

<script type="text/jsx">
  /** @jsx React.DOM */
  React.renderComponent(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

It's a bit weird looking, but from what I hear, developers that use it a lot really like it. There is another weird bit: that script type.

When you write JavaScript in the JS editor on CodePen, it gets put into the document at the bottom with a <script> tag, no type. We plan to re-do the JavaScript library dropdown soon-ish, so we don't plan to put React in there and detect that and add the type or any fancy-dancing like that.

But, you can use React on CodePen! You either:

  1. Don't use the JSX part and use the React.DOM.div type stuff instead.
  2. Put the script in the HTML editor instead, with <script type="text/jsx">
  3. Or, link up this fancy little script that makes it work!

Here's that fancy script (or here). Big thanks to Mark Funk for adapting this script to work on CodePen!

(function() {
  function runScripts() {
    var bodyScripts = 'body script:not([src])';
    Array.prototype.forEach.call(document.querySelectorAll(bodyScripts), function setJSXType(element) {
      element.setAttribute('type', 'text/jsx');    
    });
  };

  if (window.addEventListener) {
    window.addEventListener('DOMContentLoaded', runScripts, false);
  } else {
    window.attachEvent('onload', runScripts);
  }
})();

That script basically looks for our script that we put in the preview (of your authored JS) and changes the type on it. Things seem to work after that.

Here's proof:

See the Pen BGFhn by Chris Coyier (@chriscoyier) on CodePen.

Free free to just copy or fork that.

Reminders

The transformer script is just for authoring. In production you're supposed to use the compiled React JavaScript. The transformer script does a good job of reminding you of that:

You'll get an error about the angle brackets. You can ignore that probably. It's the browser trying to run the code before the script type is set properly. The transformer script is pretty good about letting you know about errors in your code, as shown here.

Demos

See the Pen React To-Do List JSX by Mark Funk (@mfunkie) on CodePen.

See the Pen React Powered Radial Progress with SVG + animation by Jon Beebe (@somethingkindawierd) on CodePen.