Huy's Notes
React inside a Backbone View

React inside a Backbone View

#ui #javascript

The idea is, use React's render function to render the view on top of a Backbone view, it's surprisingly easy:

import {render} from 'react';

export const ReactWrapper = Backbone.Layout.extend({
  className : 'react-view',

  renderTemplate : function(){},

  afterRender : function(){
    render(this.template(), this.el, this.el);
  },

  // this helps make sure `componentWillUnmount` is called if a higher level
  // backbone component removes child views, which can happen during routes
  // and other such events
  cleanup : function(){
    render(null, this.el, this.el);
  }
});

And from now on, when we create a new Backbone view, we can just use JSX inside:

(function() {

  const React = require('react');

  module.exports = ReactWrapper.extend({
    template: function() {
      return <div>Hello World</div>;
    }
  });

}());

Referred in


If you think this note resonated, be it positive or negative, please feel free to send me an email and we can talk.