From 33e2798a95b8b8d49b25607935fce564fe86253f Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Mon, 7 Oct 2013 21:49:16 -0400
Subject: [PATCH] add lib integration entry; tweak 1 sentence

---
 cookbook/cb-11-dom-event-listeners tip.md     |  2 +-
 cookbook/cb-11-dom-event-listeners.md         |  2 +-
 ...b-13-external-libraries-integration tip.md | 40 +++++++++++++++++
 .../cb-13-external-libraries-integration.md   | 43 +++++++++++++++++++
 4 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 cookbook/cb-13-external-libraries-integration tip.md
 create mode 100644 cookbook/cb-13-external-libraries-integration.md

diff --git a/cookbook/cb-11-dom-event-listeners tip.md b/cookbook/cb-11-dom-event-listeners tip.md
index 35d176bf..fb4bdf90 100644
--- a/cookbook/cb-11-dom-event-listeners tip.md	
+++ b/cookbook/cb-11-dom-event-listeners tip.md	
@@ -9,7 +9,7 @@ permalink: dom-event-listeners-tip.html
 >
 > This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery.
 
-This example displays the window width:
+Try to resize the window:
 
 ```js
 /** @jsx React.DOM */
diff --git a/cookbook/cb-11-dom-event-listeners.md b/cookbook/cb-11-dom-event-listeners.md
index ac64ffcb..aedc98f4 100644
--- a/cookbook/cb-11-dom-event-listeners.md
+++ b/cookbook/cb-11-dom-event-listeners.md
@@ -13,7 +13,7 @@ You want to listen to an event inside a component.
 >
 > This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery.
 
-This example displays the window width:
+Try to resize the window:
 
 ```js
 /** @jsx React.DOM */
diff --git a/cookbook/cb-13-external-libraries-integration tip.md b/cookbook/cb-13-external-libraries-integration tip.md
new file mode 100644
index 00000000..122db1a2
--- /dev/null
+++ b/cookbook/cb-13-external-libraries-integration tip.md	
@@ -0,0 +1,40 @@
+---
+id: external-libraries-integration-tip
+title: Integration with external libraries
+layout: docs
+permalink: external-libraries-integration-tip.html
+---
+
+Let's try jQuery.
+
+The general concept is simple: treat `componentDidMount` as jQuery's `ready` and tag your component with a `ref`. Then, call its `getDOMNode`. Notice that with `ref` (component scope), you don't need selectors anymore!
+
+```js
+/** @jsx React.DOM */
+
+var ToggleBox = React.createClass({
+  componentDidMount: function() {
+    $(this.refs.dialogueBox.getDOMNode()).hide().fadeIn(500);
+  },
+  render: function() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Toggle me!</button>
+        <div
+          ref="dialogueBox"
+          style={{border: '1px solid gray', width: 90, height: 90, padding: 10}}
+        >
+          Easy!
+        </div>
+      </div>
+    );
+  },
+  handleClick: function() {
+    $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200);
+  }
+});
+
+React.renderComponent(<ToggleBox />, mountNode);
+```
+
+Use libraries like jQuery for things like animation and AJAX, but preferably, don't manipulate the DOM with it. There are mostly likely better way to achieve that if you're already using React.
diff --git a/cookbook/cb-13-external-libraries-integration.md b/cookbook/cb-13-external-libraries-integration.md
new file mode 100644
index 00000000..33c8715b
--- /dev/null
+++ b/cookbook/cb-13-external-libraries-integration.md
@@ -0,0 +1,43 @@
+---
+id: external-libraries-integration
+title: Integration with external libraries
+layout: docs
+permalink: external-libraries-integration.html
+---
+
+### Problem
+You want to incorporate React with jQuery for, say, its animation effects.
+
+### Solution
+The general concept is simple: treat `componentDidMount` as jQuery's `ready` and tag your component with a `ref`. Then, call its `getDOMNode`. Notice that with `ref` (component scope), you don't need selectors anymore!
+
+```js
+/** @jsx React.DOM */
+
+var ToggleBox = React.createClass({
+  componentDidMount: function() {
+    $(this.refs.dialogueBox.getDOMNode()).hide().fadeIn(500);
+  },
+  render: function() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Toggle me!</button>
+        <div
+          ref="dialogueBox"
+          style={{border: '1px solid gray', width: 90, height: 90, padding: 10}}
+        >
+          Easy!
+        </div>
+      </div>
+    );
+  },
+  handleClick: function() {
+    $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200);
+  }
+});
+
+React.renderComponent(<ToggleBox />, mountNode);
+```
+
+### Discussion
+Use libraries like jQuery for things like animation and AJAX, but preferably, don't manipulate the DOM with it. There are mostly likely better way to achieve that if you're already using React.