- Overview of add-ons for the add-ons page.
- Better title for `ReactLink`.
- Nicer code format for classSet example.
- Better explanation for `classSet`.
`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`.
`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.
`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."
@ -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 <divclassName={classSet(classes)}>Great, I'll be there.</div>
return <divclassName={classes}>Great, I'll be there.</div>
}
```
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.
Cheng Lou
11 years ago