update add-ons docs based on feedbacks
- Overview of add-ons for the add-ons page. - Better title for `ReactLink`. - Nicer code format for classSet example. - Better explanation for `classSet`.
Cheng Lou committed
Nov 1, 2013 at 17:12 UTC
ff51a23aeabc06701fbf99ebf676169c5e55e402
5 files changed
+23
-15
docs/_config.yml
+3
-3
@@ -52,12 +52,12 @@ nav_docs_sections:
52
- id: tooling-integration
53
title: Tooling Integration
54
- id: addons
55
- title: Add-ons
55
+ title: Add-Ons
56
subitems:
57
- id: animation
58
title: Animation
59
- - id: form-input-binding-sugar
60
- title: Form Input Binding Sugar
59
+ - id: two-way-binding-helpers
60
+ title: Two-Way Binding Helpers
61
- id: class-name-manipulation
62
title: Class Name Manipulation
63
- id: examples
docs/docs/09-addons.md
+5
-1
@@ -7,6 +7,10 @@ prev: tooling-integration.html
7
next: animation.html
8
---
9
10
-`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.
10
+`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:
11
+
12
+- `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
13
+- `ReactLink`, to simplify the coordination between user's form input data and and the component's state.
14
+- `classSet`, for manipulating the DOM `class` string a bit more cleanly.
15
16
To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
docs/docs/09.1-animation.md
+1
-1
@@ -4,7 +4,7 @@ title: Animation
4
layout: docs
5
permalink: animation.html
6
prev: addons.html
7
-next: form-input-binding-sugar.html
7
+next: two-way-binding-helpers.html
8
---
9
10
`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.
docs/docs/09.2-form-input-binding-sugar.md
+8
-4
@@ -1,13 +1,17 @@
1
---
2
-id: form-input-binding-sugar
3
-title: Form Input Binding Sugar
2
+id: two-way-binding-helpers
3
+title: Two-Way Binding Helpers
4
layout: docs
5
-permalink: form-input-binding-sugar.html
5
+permalink: two-way-binding-helpers.html
6
prev: animation.html
7
next: class-name-manipulation.html
8
---
9
10
-`ReactLink` is an easy way to express two-way binding with React.
10
+`ReactLink` is an easy way to express two-way binding with React.
11
+
12
+> Note:
13
+>
14
+> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously.
15
16
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."
17
docs/docs/09.3-class-name-manipulation.md
+6
-6
@@ -3,7 +3,7 @@ id: class-name-manipulation
3
title: Class Name Manipulation
4
layout: docs
5
permalink: class-name-manipulation.html
6
-prev: form-input-binding-sugar.html
6
+prev: two-way-binding-helpers.html
7
next: examples.html
8
---
9
@@ -30,17 +30,17 @@ This can quickly get tedious, as assigning class name strings can be hard to rea
30
31
```javascript
32
render: function() {
33
- var classSet = React.addons.classSet;
34
- var classes = {
33
+ var cx = React.addons.classSet;
34
+ var classes = cx({
35
'message': true,
36
'message-important': this.props.isImportant,
37
'message-read': this.props.isRead
38
- }
38
+ })
39
// same final string, but much cleaner
40
- return <div className={classSet(classes)}>Great, I'll be there.</div>
40
+ return <div className={classes}>Great, I'll be there.</div>
41
}
42
```
43
44
-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.
44
+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.
45
46
No more hacky string concatenations!