Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical React in Marionette application

mthenw
April 10, 2015

Practical React in Marionette application

meet.js Poznań

mthenw

April 10, 2015
Tweet

More Decks by mthenw

Other Decks in Programming

Transcript

  1. not so much unit tests a lot of HTML duplication

    overcomplicated business logic two-way binding (rivets.js)
  2. var ReactBridge = Backbone.Marionette.ItemView.extend({ template: "#react-bridge-template", initialize: function (options) {

    this.options = options; }, onRender: function () { React.render(this.initializeComponent(this.options), this.el); }, onClose: function () { React.unmountComponentAtNode(this.el); } });
  3. var Grid = ReactBridge.extend({ initializeComponent: function (options) { return DataGridComponent({

    title: "Cool Grid", desc: "with awesome data", collection: options.collection, ... }); } });
  4. var Header = React.createClass({ render() { return ( <header className={

    `${this.props.classNamePrefix}-header content-header` }> <div> <h1 key="header"><span>{ this.t(this.props.title) }</span></h1> <span className="desc" key="desc">{ this.t(this.props.desc) }</span> { filters } <div className="actions" key="actions">{ actions }</div> </div> </header> ); } }); var Header = React.createClass({ render() { return ( React.createElement( "header", {className: `${this.props.classNamePrefix}-header content-header`}, React.createElement("div", null, React.createElement("h1", {key: “header"}, React.createElement("span", null, this.t(this.props.title) )), React.createElement("span", {className: "desc", key: "desc"}, this.t(this.props.desc) ), filters, React.createElement("div", {className: "actions", key: "actions"}, actions ) ) ) ); } });
  5. var DataGrid = React.createClass({ render() { return <div className="datagrid" >

    <Header /> <Notifications /> <Table /> <Pagination /> </div>; } });
  6. +1