#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

Preact and React Developer Tools

#reading #ui TL;DR: If you're trying to make Preact works with the latest React Dev Tools, just give up. Use their own Dev Tools instead…

Home Page

Welcome! Look like you've found my personal notebook. This is the place where you can take a peek into my mind to see what I've been…

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

React inside a Backbone View

Referred in