From 3ffbb22ccb3160bb36accd741717eaf60c831dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Fri, 16 Jan 2015 13:05:43 -0800
Subject: [PATCH] Merge pull request #2795 from chenglou/tips-lib

[Docs] Tip on integration with other libraries
---
 docs/_data/nav_tips.yml                       |  2 +
 docs/tips/17-children-undefined.md            |  1 +
 .../tips/18-use-react-with-other-libraries.md | 38 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 docs/tips/18-use-react-with-other-libraries.md

diff --git a/docs/_data/nav_tips.yml b/docs/_data/nav_tips.yml
index 8299f6ea39..992ba49655 100644
--- a/docs/_data/nav_tips.yml
+++ b/docs/_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
diff --git a/docs/tips/17-children-undefined.md b/docs/tips/17-children-undefined.md
index 0be65a26db..cfbc656df1 100644
--- a/docs/tips/17-children-undefined.md
+++ b/docs/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:
diff --git a/docs/tips/18-use-react-with-other-libraries.md b/docs/tips/18-use-react-with-other-libraries.md
new file mode 100644
index 0000000000..43299deb09
--- /dev/null
+++ b/docs/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.