Skip to content

Commit 5946c69

Browse files
Mark PedrottiMark Pedrotti
Mark Pedrotti
authored and
Mark Pedrotti
committed
in component table: invert rows and columns, th style instead of center element, th scope
1 parent e52a0e0 commit 5946c69

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

docs/basics/UsageWithReact.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,35 +20,37 @@ React bindings for Redux embrace the idea of [separating “smart” and “dumb
2020

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

23-
<center>
2423
<table>
2524
<thead>
2625
<tr>
2726
<th></th>
28-
<th>Location</th>
29-
<th>Aware of Redux</th>
30-
<th>To read data</th>
31-
<th>To change data</th>
27+
<th scope="col" style="text-align:left">“Smart” Components</th>
28+
<th scope="col" style="text-align:left">“Dumb” Components</th>
3229
</tr>
3330
</thead>
3431
<tbody>
3532
<tr>
36-
<td>“Smart” Components</td>
33+
<th scope="row" style="text-align:right">Location</th>
3734
<td>Top level, route handlers</td>
38-
<td>Yes</th>
39-
<td>Subscribe to Redux state</td>
40-
<td>Dispatch Redux actions</td>
35+
<td>Middle and leaf components</td>
4136
</tr>
4237
<tr>
43-
<td>“Dumb” Components</td>
44-
<td>Middle and leaf components</td>
38+
<th scope="row" style="text-align:right">Aware of Redux</th>
39+
<td>Yes</th>
4540
<td>No</th>
41+
</tr>
42+
<tr>
43+
<th scope="row" style="text-align:right">To read data</th>
44+
<td>Subscribe to Redux state</td>
4645
<td>Read data from props</td>
46+
</tr>
47+
<tr>
48+
<th scope="row" style="text-align:right">To change data</th>
49+
<td>Dispatch Redux actions</td>
4750
<td>Invoke callbacks from props</td>
4851
</tr>
4952
</tbody>
5053
</table>
51-
</center>
5254

5355
In this todo app, we will only have a single “smart” component at the top of our view hierarchy. In more complex apps, you might have several of them. While you may nest “smart” components, we suggest that you pass props down whenever possible.
5456

@@ -271,7 +273,7 @@ First, we need to import `Provider` from [`react-redux`](http://github.com/gaear
271273
#### `index.js`
272274

273275
```js
274-
import React from 'react';
276+
import React from 'react';
275277
import { createStore } from 'redux';
276278
import { Provider } from 'react-redux';
277279
import App from './containers/App';

0 commit comments

Comments
 (0)