Migrating Considerations

In notebook:
FrontEndMasters React
Created at:
2016-06-21
Updated:
2016-06-21
Tags:
libraries React JavaScript jQuery
From the previous note, is it OK to call this in js/views/app-view.js ?
  				// 1. ++++ Render with React
				React.render(React.createElement(app.Stats, {
					completed: completed,
					remaining: remaining
				}), this.$footer[0]);
It is. React will still create the virtual DOM and will still be very efficient. When you call it many times it’s like calling ​setstate​ in a component. No performance issues at all.

The basic strategy for migrating to React

Think of your application’s UI as a big tree (sitemap). Go to the smallest piece of element – a leaf node – and convert that. Then do the sibling and when done, climb up a level. 
Start at the bottom and climb upwards. 

Converting jQuery UI

More complicated as now you have modal dialogs, etc. React does not read from the DOM at all only writes to it. If another library changes the DOM where it expects a node, it will give an error. 
His final advice: “You have to find a way to skip over libraries that change the DOM”

More on jQuery modal:
jQuery modal actually removes that element from the parent node and moves down as a direct child of document.body to avoid layout and display issues. 

You need to do it with Portals. 
https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

The concept is that you break (stop) the rendering where there’s a jQuery modal, let the jQuery do it’s manipulations, and when done continue with the render taking account that jQuery moved the parts of the DOM.
We “jump over” any DOM manipulation that an outside library did. 
  var Dialog = React.createClass({
  render: function() {
    // we "STOP" the rendering with an empty div
    // don't render anything, this is where we open the portal
    return <div/>;
  },

  componentDidMount: function() {
    // this a React method to get DOM node out
    var node = this.getDOMNode();

    // do the old-school stuff
    var dialog = $(node).dialog().data('ui-dialog');
  
    // start a new React render tree with our node and the children
    // passed in from above, this is the other side of the portal.
    React.render(<div>{this.props.children}</div>, node);
  }
});
Note: the GitHub uses the old syntax (​React.renderComponent​)

With the above code, we don’t get the updates. For this:
  var Dialog = React.createClass({
  //...

  componentDidMount: function() {
    // store the node on the `this.node` so we can access elsewhere
    this.node = this.getDOMNode();
    var dialog = $(this.node).dialog().data('ui-dialog');
  
    // moved this code so we can call it in other places
    this.renderDialogContent();
  },
  
  // 1. ++++
  // add this hook
  componentWillReceiveProps: function(newProps) {
    // its important to pass the new props in
    this.renderDialogContent(newProps);
  },

  // 2. ++++
  renderDialogContent: function(props) {
    // if called from `componentWillReceiveProps`, then we use the new
    // props, otherwise use what we already have.
    props = props || this.props;

    // the code that used to be in `componentDidMount`
    // 3. ++++
    React.renderComponent(<div>{props.children}</div>, this.node):
  }
});
You can pass options to it (see GitHub link above). He has a native React modal dialog component in Github (couldn’t find it).