Skip to content

Commit b2b9f07

Browse files
committed
Merge pull request #191 from camsong/master
Rename smart/dumb to presentational/container
2 parents 8a096db + bcd3302 commit b2b9f07

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

docs/quick-start.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
## Quick Start
22

3-
React bindings for Redux embrace the idea of [dividing “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
3+
React bindings for Redux embrace the idea of [dividing container and presentational components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
44

5-
It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be “dumb” and receive all data via props.
5+
It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be presentational and receive all data via props.
66

77

88
<table>
99
<thead>
1010
<tr>
1111
<th></th>
12-
<th scope="col" style="text-align:left">“Smart” Components</th>
13-
<th scope="col" style="text-align:left">“Dumb” Components</th>
12+
<th scope="col" style="text-align:left">Container Components</th>
13+
<th scope="col" style="text-align:left">Presentational Components</th>
1414
</tr>
1515
</thead>
1616
<tbody>
@@ -37,9 +37,9 @@ It is advisable that only top-level components of your app (such as route handle
3737
</tbody>
3838
</table>
3939

40-
### “Dumb” components are unaware of Redux
40+
### Presentational components are unaware of Redux
4141

42-
Let’s say we have a `<Counter />` “dumb” component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button:
42+
Let’s say we have a `<Counter />` presentational component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button:
4343

4444
```js
4545
import React from 'react'
@@ -53,11 +53,11 @@ export default function Counter(props) {
5353
}
5454
```
5555

56-
### “Smart” components are `connect()`-ed to Redux
56+
### Container components are `connect()`-ed to Redux
5757

5858
Here’s how we hook it up to the Redux Store.
5959

60-
We will use the `connect()` function provided by `react-redux` to turn a “dumb” `Counter` into a smart component. The `connect()` function lets you specify *which exact* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity.
60+
We will use the `connect()` function provided by `react-redux` to turn a presentational `Counter` into a container component. The `connect()` function lets you specify *which exact* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity.
6161

6262
##### `containers/CounterContainer.js`
6363

@@ -96,7 +96,7 @@ export default connect(
9696
// See more recipes in detailed connect() examples below.
9797
```
9898

99-
Whether to put the `connect()` call in the same file as the “dumb” component, or separately, is up to you.
99+
Whether to put the `connect()` call in the same file as the presentational component, or separately, is up to you.
100100
Ask yourself whether you’d want to reuse this component but bind it to different data, or not.
101101

102102
### Nesting

0 commit comments

Comments
 (0)