Backbone视图渲染React组件

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
     <title></title>
     <script src="react/react-0.14.7/build/react.js"></script>
     <script src="react/react-0.14.7/build/react-dom.js"></script>
     <script src="react/browser.min.js"></script>
     <script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
       <script src="app/scripts/vendor/underscore.js"></script>
        <script src="app/scripts/vendor/backbone.js"></script>
   </head>
   <body>
     <div id="example"></div>
     <script type="text/babel">
       var HelloMessage = React.createClass({
         render: function() {
           return <h1>Hello World！{this.props.name}</h1>;
         }
       });

       ReactDOM.render(
         <HelloMessage />,
         document.getElementById('example')
       );

        var MyView = Backbone.View.extend({
   el: 'body',
   template: '<div class="widget-container"></div>',
   render: function() {
     this.$el.html(this.template);
     var HM=React.createFactory(HelloMessage);
     ReactDOM.render(new HM({name:'xxxxx'}), this.$('.widget-container').get(0));
     // ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0));
     //  ReactDOM.render(<HM  name='xiaoxiao'/>), this.$('.widget-container').get(0));
     //  ReactDOM.render(<HelloMessage  name='xiaoxiao'/>), this.$('.widget-container').get(0));
     return this;
   }
     });

         new MyView().render();
     </script>
   </body>
 </html>