Fix broken guide example in "Motivation: Separation of Concerns"
The code example in `Motivation: Separation of Concerns` now fetches the `Engineering` facebook page instead of the user `pwh`. With the current version of the graph api, it is impossible to fetch the user picture from an username. However it is still doable for public pages.
Mathieu Savy committed
Jan 24, 2016 at 17:04 UTC
e1b7c3aa0c4ca3bf3b459c8a968ec5d5d7be56f5
1 file changed
+11
-11
docs/docs/04-multiple-components.md
+11
-11
@@ -14,49 +14,49 @@ By building modular components that reuse other components with well-defined int
14
15
## Composition Example
16
17
-Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
17
+Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.
18
19
```javascript
20
var Avatar = React.createClass({
21
render: function() {
22
return (
23
<div>
24
- <ProfilePic username={this.props.username} />
25
- <ProfileLink username={this.props.username} />
24
+ <PagePic pagename={this.props.pagename} />
25
+ <PageLink pagename={this.props.pagename} />
26
</div>
27
);
28
}
29
});
30
31
-var ProfilePic = React.createClass({
31
+var PagePic = React.createClass({
32
render: function() {
33
return (
34
- <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
34
+ <img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
35
);
36
}
37
});
38
39
-var ProfileLink = React.createClass({
39
+var PageLink = React.createClass({
40
render: function() {
41
return (
42
- <a href={'https://www.facebook.com/' + this.props.username}>
43
- {this.props.username}
42
+ <a href={'https://www.facebook.com/' + this.props.pagename}>
43
+ {this.props.pagename}
44
</a>
45
);
46
}
47
});
48
49
ReactDOM.render(
50
- <Avatar username="pwh" />,
50
+ <Avatar pagename="Engineering" />,
51
document.getElementById('example')
52
);
53
```
54
55
## Ownership
56
57
-In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.
57
+In the above example, instances of `Avatar` *own* instances of `PagePic` and `PageLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.
58
59
-It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
59
+It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `PagePic` and `PageLink` instances, and `div` is the **parent** (but not owner) of the `PagePic` and `PageLink` instances.
60
61
## Children
62