MENU


Embedding React in Backbone View

Below, we create a Backbone view called ParagraphView which overrides Backbone's render() function to render a React <Paragraph> component into the DOM element provided by Backbone (this.el).

React works with Backbone!
RESETRUNFULL
import React from 'react'import ReactDOM from 'react-dom';import Backbone from 'backbone';function Paragraph(props) {
  return <p>{props.text}</p>;}const ParagraphView = Backbone.View.extend({
  el:'body',
  render() {
    const text = this.model.get('text');
    ReactDOM.render(<Paragraph text={text} />, this.el);
    return this;
  },
  remove() {
    ReactDOM.unmountComponentAtNode(this.el);
    Backbone.View.prototype.remove.call(this);
  }});const model = new Backbone.Model({ text: 'React works with Backbone!' });const view = new ParagraphView({ model, el: "#root" });view.render();