====== Using JQuery with react ======

===== Basics =====
From [[http://ludovf.net/reactbook/blog/reactjs-jquery-ui-autocomplete.html|Integrate jQuery UI autocomplete and React]]\\
JQuery UI widget lives outside react. React is not making any updates.
<code javascript>
render: function() {
  return (<div></div>)
},
componentDidMount: function() {
  $(React.findDOMNode(this)).jquery_widget({param1: 'value1', param2: 'value2'});
},
componentWillUnmount: function() {
  $(React.findDOMNode(this)).jquery_widget('destroy');
},
shouldComponentUpdate: function() {
  return false
},
</code>
Propagate changes from react to widget:
<code javascript>
componentDidMount: function() {
  this.updateAutocomplete();
},

componentDidUpdate: function() {
  this.updateAutocomplete();
},

updateAutocomplete: function() {
  var tags = this.props.tags;
  $(React.findDOMNode(this)).autocomplete({source: tags});
}
</code>
Improve performance:
<code javascript>
shouldComponentUpdate: function(nextProps) {
  return this.props.tags !== nextpProps.tags;
}
</code>




[[http://tech.oyster.com/using-react-and-jquery-together/]]

Wrapper:
[[https://github.com/petehunt/react-jqueryui/blob/master/src/index.js|Use jQuery UI from React]]

===== Slider =====
[[http://aliolicode.com/2016/04/29/using-non-react-components-react/|Using non React components with React]]

===== Autocomplete =====
[[http://ludovf.net/reactbook/blog/reactjs-jquery-ui-autocomplete.html|Integrate jQuery UI autocomplete and React]]

===== Sortable =====
Original post for old react version:
[[https://gist.github.com/petehunt/7882164]]

Modified version:
[[http://www.sawyerh.com/writing/using-jquery-ui-sortable-with-react/|Using jQuery UI Sortable with React components]]


[[https://github.com/facebook/react/tree/master/examples/jquery-mobile|jQuery Mobile React Example]]