|
2 | 2 |
|
3 | 3 | [](https://travis-ci.org/the-road-to-learn-react/react-composability-over-configurability) [](https://slack-the-road-to-learn-react.wieruch.com/) [](https://greenkeeper.io/) |
4 | 4 |
|
5 | | -React gives you the power of composing components into each other with its children prop. You should make use of it rather than passing "configurational" props to one complex component. That way you keep your components lightweight and give yourself lots of flexibility for adjustments. |
6 | | - |
7 | | -``` |
8 | | -const OPTIONS = [ |
9 | | - { value: 'grapefruit', label: 'Grapefruit' }, |
10 | | - { value: 'lime', label: 'Lime' }, |
11 | | - { value: 'coconut', label: 'Coconut' }, |
12 | | - { value: 'mango', label: 'Mango' }, |
13 | | -]; |
14 | | -
|
15 | | -// Configuration |
16 | | -// the Select components has the <select> and <option> elements within one complex component |
17 | | -<Select |
18 | | - value={this.state.value} |
19 | | - options={this.props.options} |
20 | | - handleChange={this.handleChange} |
21 | | -/> |
22 | | -
|
23 | | -// Composition |
24 | | -// the Select component has only the <select> element |
25 | | -// the Option component has only the <option> element |
26 | | -// advantages: lightweight components, flexible way of composing components into each other |
27 | | -<Select |
28 | | - value={this.state.value} |
29 | | - handleChange={this.handleChange} |
30 | | -> |
31 | | - {this.props.options.map(option => |
32 | | - <Option key={option.value} {...option} /> |
33 | | - )} |
34 | | -</Select> |
35 | | -``` |
| 5 | +React gives you the power of composing components into each other with its children prop. You should make use of it rather than passing "configurational" props to one complex component. That way you keep your components lightweight and give yourself lots of flexibility for adjustments. [Read more about it.](https://www.robinwieruch.de/react-component-composition) |
36 | 6 |
|
37 | 7 | ## Installation |
38 | 8 |
|
39 | | -* `git clone git@github.com:the-road-to-learn-react/react-composability-over-configurability.git` |
40 | | -* cd react-composability-over-configurability |
41 | | -* npm install |
42 | | -* npm start |
43 | | -* visit `http://localhost:3000/` |
| 9 | +- `git clone git@github.com:the-road-to-learn-react/react-composability-over-configurability.git` |
| 10 | +- cd react-composability-over-configurability |
| 11 | +- npm install |
| 12 | +- npm start |
| 13 | +- visit `http://localhost:3000/` |
0 commit comments