diff --git a/_config.yml b/_config.yml index 88fc7643..ef61c5de 100644 --- a/_config.yml +++ b/_config.yml @@ -52,12 +52,12 @@ nav_docs_sections: - id: tooling-integration title: Tooling Integration - id: addons - title: Add-ons + title: Add-Ons subitems: - id: animation title: Animation - - id: form-input-binding-sugar - title: Form Input Binding Sugar + - id: two-way-binding-helpers + title: Two-Way Binding Helpers - id: class-name-manipulation title: Class Name Manipulation - id: examples diff --git a/docs/09-addons.md b/docs/09-addons.md index 26edf99f..e1181ab0 100644 --- a/docs/09-addons.md +++ b/docs/09-addons.md @@ -7,6 +7,10 @@ prev: tooling-integration.html next: animation.html --- -`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. +`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: + +- `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal. +- `ReactLink`, to simplify the coordination between user's form input data and and the component's state. +- `classSet`, for manipulating the DOM `class` string a bit more cleanly. To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`. diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md index 3d83f1b6..ad714fdf 100644 --- a/docs/09.1-animation.md +++ b/docs/09.1-animation.md @@ -4,7 +4,7 @@ title: Animation layout: docs permalink: animation.html prev: addons.html -next: form-input-binding-sugar.html +next: two-way-binding-helpers.html --- `ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library. diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md index a1aa5998..a11edc07 100644 --- a/docs/09.2-form-input-binding-sugar.md +++ b/docs/09.2-form-input-binding-sugar.md @@ -1,13 +1,17 @@ --- -id: form-input-binding-sugar -title: Form Input Binding Sugar +id: two-way-binding-helpers +title: Two-Way Binding Helpers layout: docs -permalink: form-input-binding-sugar.html +permalink: two-way-binding-helpers.html prev: animation.html next: class-name-manipulation.html --- -`ReactLink` is an easy way to express two-way binding with React. +`ReactLink` is an easy way to express two-way binding with React. + +> Note: +> +> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously. In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding." diff --git a/docs/09.3-class-name-manipulation.md b/docs/09.3-class-name-manipulation.md index 4e5ca0bd..2cc91b04 100644 --- a/docs/09.3-class-name-manipulation.md +++ b/docs/09.3-class-name-manipulation.md @@ -3,7 +3,7 @@ id: class-name-manipulation title: Class Name Manipulation layout: docs permalink: class-name-manipulation.html -prev: form-input-binding-sugar.html +prev: two-way-binding-helpers.html next: examples.html --- @@ -30,17 +30,17 @@ This can quickly get tedious, as assigning class name strings can be hard to rea ```javascript render: function() { - var classSet = React.addons.classSet; - var classes = { + var cx = React.addons.classSet; + var classes = cx({ 'message': true, 'message-important': this.props.isImportant, 'message-read': this.props.isRead - } + }) // same final string, but much cleaner - return
Great, I'll be there.
+ return
Great, I'll be there.
} ``` -Pass to `classSet()` an object, whose key is the CSS class name you might or might not need, and whose value is a boolean (or anything that converts to it) that indicates whether the key should be present in the final class string. +When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string. No more hacky string concatenations!