{"body":"closes #403","parents":["5325e944e95c6bb56d5ce451b2ed777213a2a84e"],"files":[{"path":"docs\/_config.yml","status":"M"},{"path":"docs\/docs\/08-tooling-integration.md","status":"M"},{"path":"docs\/docs\/09-addons.md","status":"A"},{"previousPath":"docs\/docs\/09-examples.md","path":"docs\/docs\/10-examples.md","status":"R091"}],"patch":"diff --git a\/docs\/_config.yml b\/docs\/_config.yml\nindex b6990448b1..c7f28a47e1 100644\n--- a\/docs\/_config.yml\n+++ b\/docs\/_config.yml\n@@ -51,6 +51,8 @@ nav_docs_sections:\n title: More About Refs\n - id: tooling-integration\n title: Tooling Integration\n+ - id: addons\n+ title: Add-ons\n - id: examples\n title: Examples\n - title: Reference\ndiff --git a\/docs\/docs\/08-tooling-integration.md b\/docs\/docs\/08-tooling-integration.md\nindex abe17706c9..af758dd198 100644\n--- a\/docs\/docs\/08-tooling-integration.md\n+++ b\/docs\/docs\/08-tooling-integration.md\n@@ -4,7 +4,7 @@ title: Tooling Integration\n layout: docs\n permalink: tooling-integration.html\n prev: more-about-refs.html\n-next: examples.html\n+next: addons.html\n ---\n \n Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.\ndiff --git a\/docs\/docs\/09-addons.md b\/docs\/docs\/09-addons.md\nnew file mode 100644\nindex 0000000000..bc1c6fc4cd\n--- \/dev\/null\n+++ b\/docs\/docs\/09-addons.md\n@@ -0,0 +1,210 @@\n+---\n+id: addons\n+title: Add-ons\n+layout: docs\n+permalink: addons.html\n+prev: tooling-integration.html\n+next: examples.html\n+---\n+\n+`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library.\n+\n+## CSS Animation and Transitions\n+\n+`ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. `ReactTransitions` is inspired by the excellent [ng-animate](http:\/\/www.nganimate.org\/) library.\n+\n+### Getting Started\n+\n+`ReactTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.\n+\n+```javascript{22-24}\n+\/** @jsx React.DOM *\/\n+\n+var ReactTransitionGroup = React.addons.TransitionGroup;\n+\n+var TodoList = React.createClass({\n+ getInitialState: function() {\n+ return {items: ['hello', 'world', 'click', 'me']};\n+ },\n+ handleAdd: function() {\n+ var newItems =\n+ this.state.items.concat([prompt('Enter some text')]);\n+ this.setState({items: newItems});\n+ },\n+ handleRemove: function(i) {\n+ var newItems = this.state.items;\n+ newItems.splice(i, 0)\n+ this.setState({items: newItems});\n+ },\n+ render: function() {\n+ var items = this.state.items.map(function(item, i) {\n+ return (\n+

\n+ {item}}\n+ <\/div>\n+ );\n+ }.bind(this));\n+ return (\n+

\n+

dillon1000/react

Files changed