From ae6d257a284cb8f29a9f21ee794ffcc7d7fb2d14 Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Wed, 9 Oct 2013 23:50:56 -0400 Subject: [PATCH] remove entry 13 jquery animation; react has animation --- ...b-13-external-libraries-integration tip.md | 40 ----------------- .../cb-13-external-libraries-integration.md | 43 ------------------- 2 files changed, 83 deletions(-) delete mode 100644 cookbook/cb-13-external-libraries-integration tip.md delete mode 100644 cookbook/cb-13-external-libraries-integration.md diff --git a/cookbook/cb-13-external-libraries-integration tip.md b/cookbook/cb-13-external-libraries-integration tip.md deleted file mode 100644 index 122db1a2..00000000 --- a/cookbook/cb-13-external-libraries-integration tip.md +++ /dev/null @@ -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 ( -
- -
- Easy! -
-
- ); - }, - handleClick: function() { - $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200); - } -}); - -React.renderComponent(, 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 deleted file mode 100644 index 33c8715b..00000000 --- a/cookbook/cb-13-external-libraries-integration.md +++ /dev/null @@ -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 ( -
- -
- Easy! -
-
- ); - }, - handleClick: function() { - $(this.refs.dialogueBox.getDOMNode()).stop().toggle(200); - } -}); - -React.renderComponent(, 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.