Merge pull request #2795 from chenglou/tips-lib

[Docs] Tip on integration with other libraries

_data/nav_tips.yml

@@ -34,3 +34,5 @@
     title: References to Components
   - id: children-undefined
     title: this.props.children undefined
+  - id: use-react-with-other-libraries
+    title: Use React with Other Libraries

tips/17-children-undefined.md

@@ -4,6 +4,7 @@ title: this.props.children undefined
 layout: tips
 permalink: children-undefined.html
 prev: references-to-components.html
+next: use-react-with-other-libraries.html
 ---
 
 You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:

tips/18-use-react-with-other-libraries.md

@@ -0,0 +1,38 @@
+---
+id: use-react-with-other-libraries
+title: Use React with Other Libraries
+layout: tips
+permalink: use-react-with-other-libraries.html
+prev: children-undefined.html
+---
+
+You don't have to go full React. The component [lifecycle events](/react/docs/component-specs.html#lifecycle-methods), especially `componentDidMount` and `componentDidUpdate`, are good places to put your other libraries' logic.
+
+```js
+var App = React.createClass({
+  getInitialState: function() {
+    return {myModel: new myBackboneModel({items: [1, 2, 3]})};
+  },
+
+  componentDidMount: function() {
+    $(this.refs.placeholder.getDOMNode()).append($('<span />'));
+  },
+
+  componentWillUnmount: function() {
+    // Clean up work here.
+  },
+
+  shouldComponentUpdate: function() {
+    // Let's just never update this component again.
+    return false;
+  },
+
+  render: function() {
+    return <div ref="placeholder"/>;
+  }
+});
+
+React.render(<App />, mountNode);
+```
+
+You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.