Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including backbone.react-view with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var backboneReactView = require("backbone.react-view")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

backbone.react-view v3.0.0

Backbone.ReactView

Backbone.ReactView

A simple Backbone View for rendering React components.

import ReactView from 'backbone.react-view';
import MyReactComponent from './my-react-component';

const reactView = new ReactView({
  component: MyReactComponent
});

reactView.render();
reactView.remove();

Marionette example:

import ReactView from 'backbone.react-view';
import {LayoutView} from 'backbone.marionette';
import MyReactComponent from './my-react-component'

export default LayoutView.extend({
  template() {
    return '<div class="my-region"></div>';
  },

  regions: { myRegion: '.my-region' },

  onRender() {
    this.myRegion.show(new ReactView({
      component: MyReactComponent
    }));
  }
});

To wrap with a Redux <Provider>:

import ReactView from 'backbone.react-view';
import {Provider} from 'react-redux';
import store from './my-store';

export default ReactView.extend({
  wrapChildren(children) {
    return (
      <Provider store={store}>
        {children}
      </Provider>
    );
  }
});

Then just use that copy of ReactView.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free