amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 20:53:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove entry 13 jquery animation; react has animation

Browse Source
This commit is contained in:
Cheng Lou
2013-10-09 23:50:56 -04:00
committed by Connor McSheffrey
parent a4a88e7e8e
commit ae6d257a28
2 changed files with 0 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
cookbook/cb-13-external-libraries-integration tip.md
View File

@@ -1,40 +0,0 @@
---
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.

43
cookbook/cb-13-external-libraries-integration.md
View File

@@ -1,43 +0,0 @@
---
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.