Backbone / ReactJS view not recognizing JSX

Question

I'm starting on a Backbone AMD application, using React.js for the views. The view is not recognizing the JSX I've written in the render() function. Am I missing a statement in the router or view? The error I'm receiving is 'Unexpected token <'.

Below is the app flow from top to bottom:

Index.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script> -->
<script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>

main.js

require.config({
paths: {
   jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min',
   underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min',
   backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
   react: 'http://fb.me/react-0.12.0',
   JSXTransformer: 'http://fb.me/JSXTransformer-0.12.0'
}
});

require([

 // Load our app module and pass it to our definition function
'app',
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
});

app.js

define([
 'jquery',
 'underscore',
 'backbone',
 'router' // Request router.js

], function($, _, Backbone, Router){
   var initialize = function(){
   // Pass in our Router module and call it's initialize function
   Router.initialize();
}

return {
  initialize: initialize
};
});

router.js

define([
'jquery',
'underscore',
'backbone',
'views/team/list' 
 ], function($, _, Backbone, TeamListView){

 var AppRouter = Backbone.Router.extend({
   routes: {
   // Define some URL routes
  'team': 'showTeam',

  // Default
  '*actions': 'defaultAction'
  }
});

 var initialize = function(){
    var app_router = new AppRouter;

    app_router.on('route:showTeam', function(){
    // Call render on the module we loaded in via the dependency array
    // 'views/teams/list'
    var teamListView = new TeamListView();
    teamListView.render();

  });

  app_router.on('route:defaultAction', function(actions){
    // We have no matching route, lets just log what the URL was
    console.log('No route:', actions);
  });

  Backbone.history.start();

};
return {
  initialize: initialize
};
});

list.js

/**
 * @jsx React.DOM
*/
define(
  [
  'jquery',
  'underscore',
  'backbone',
  'react',
  'JSXTransformer'
  ], function($, _, Backbone, react, JSXTransformer){

    var MyWidget = React.createClass({
      handleClick: function() {
        alert('Hello!');
      },
      render: function() {
        return (
          <a href="#" onClick={this.handleClick}>Do something!</a>
          );
       }
    }),

    var TeamListView = Backbone.View.extend({
      el: 'body',
      template: '<div class="widget-container"></div>',
      render: function() {
        this.$el.html(this.template);
        React.renderComponent(new MyWidget(), this.$('.widget-container').get(0));
        return this;
      }
    });
  // Our module now returns our view
  return TeamListView;
});

list.js (updated - working version)

define(
  [
  'jquery',
  'underscore',
  'backbone',
  'react'
  ], function($, _, Backbone, React){

  var MyWidget = React.createClass({displayName: 'MyWidget',
      handleClick: function() {
      alert('Hello!');
  },
  render: function() {
    return (<div>
      <ul>
      <li></li>
      <li></li>
      </ul>
      <div>Test</div>
      <a href="#" onClick={this.handleClick}>Do something!</a>
      </div>
      )
  }
});

var TeamListView = Backbone.View.extend({

  el: $('#mainContent'),
        events: {

        },

        initialize: function() {
            console.log('test');
        },

        render: function (){

          React.render(
            React.createElement(MyWidget, null),
            document.getElementById('mainContent')
          );
        }     
  });

  return TeamListView;
});

Answer 1

JSX must be compiled to JavaScript before browsers can understand it.

You can use the jsx tool to do this.

JSX transformer and Require.js are incompatible.