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!
import React from 'react'import { createRoot } from 'react-dom/client';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');
    if (!this.root) {
      this.root = createRoot(this.el);
    }
    this.root.render(<Paragraph text={text} />);
    return this;
  },
  remove() {
    if (this.root) {
      this.root.unmount();
    }
    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();