add lib integration entry; tweak 1 sentence
Cheng Lou committed
Oct 7, 2013 at 21:49 UTC
7db760427cdf698bf126ce38ec35938ba3ef3535
4 files changed
+85
-2
docs/cookbook/cb-11-dom-event-listeners tip.md
+1
-1
@@ -9,7 +9,7 @@ permalink: dom-event-listeners-tip.html
9
>
10
> 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.
11
12
-This example displays the window width:
12
+Try to resize the window:
13
14
```js
15
/** @jsx React.DOM */
docs/cookbook/cb-11-dom-event-listeners.md
+1
-1
@@ -13,7 +13,7 @@ You want to listen to an event inside a component.
13
>
14
> 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.
15
16
-This example displays the window width:
16
+Try to resize the window:
17
18
```js
19
/** @jsx React.DOM */
docs/cookbook/cb-13-external-libraries-integration tip.md
new
+40
@@ -0,0 +1,40 @@
1
+---
2
+id: external-libraries-integration-tip
3
+title: Integration with external libraries
4
+layout: docs
5
+permalink: external-libraries-integration-tip.html
6
+---
7
+
8
+Let's try jQuery.
9
+
10
+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!
11
+
12
+```js
13
+/** @jsx React.DOM */
14
+
15
+var ToggleBox = React.createClass({
16
+ componentDidMount: function() {
17
+ $(this.refs.dialogueBox.getDOMNode()).hide().fadeIn(500);
18
+ },
19
+ render: function() {
20
+ return (
21
+ <div>
22
+ <button onClick={this.handleClick}>Toggle me!</button>
23
+ <div
24
+ ref="dialogueBox"
25
+ style={{border: '1px solid gray', width: 90, height: 90, padding: 10}}
26
+ >
27
+ Easy!
28
+ </div>
29
+ </div>
30
+ );
31
+ },
32
+ handleClick: function() {
33
+ $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200);
34
+ }
35
+});
36
+
37
+React.renderComponent(<ToggleBox />, mountNode);
38
+```
39
+
40
+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.
docs/cookbook/cb-13-external-libraries-integration.md
new
+43
@@ -0,0 +1,43 @@
1
+---
2
+id: external-libraries-integration
3
+title: Integration with external libraries
4
+layout: docs
5
+permalink: external-libraries-integration.html
6
+---
7
+
8
+### Problem
9
+You want to incorporate React with jQuery for, say, its animation effects.
10
+
11
+### Solution
12
+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!
13
+
14
+```js
15
+/** @jsx React.DOM */
16
+
17
+var ToggleBox = React.createClass({
18
+ componentDidMount: function() {
19
+ $(this.refs.dialogueBox.getDOMNode()).hide().fadeIn(500);
20
+ },
21
+ render: function() {
22
+ return (
23
+ <div>
24
+ <button onClick={this.handleClick}>Toggle me!</button>
25
+ <div
26
+ ref="dialogueBox"
27
+ style={{border: '1px solid gray', width: 90, height: 90, padding: 10}}
28
+ >
29
+ Easy!
30
+ </div>
31
+ </div>
32
+ );
33
+ },
34
+ handleClick: function() {
35
+ $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200);
36
+ }
37
+});
38
+
39
+React.renderComponent(<ToggleBox />, mountNode);
40
+```
41
+
42
+### Discussion
43
+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.