Skip to content

Commit 6f14ff6

Browse files
BunlongBunlong
committed
➕ Container Component, Destructuring, External Templating Component, Nested Destructuring, Promises over Callbacks
1 parent ea7a906 commit 6f14ff6

8 files changed

+311
-8
lines changed

‎docs/container-component.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
id: container-component
3+
sidebar_label: Container component (Stateful component)
4+
title: Container Component (Stateful Component)
5+
description: Container component (Stateful component) | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['container component (stateful component)', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Container component (Stateful component)
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
A container does data fetching and then renders its corresponding sub-component.
12+
13+
Assume that you have a component that displays comments, you didn't know about container components, so you put everything in one place.
14+
15+
```jsx
16+
const fetchSomeComments = cb =>
17+
cb([
18+
{ author: "Bunlong VAN", body: "Nice to see you here!" },
19+
{ author: "You", body: "Thanks!" }
20+
])
21+
22+
class CommentList extends React.Component {
23+
this.state = { comments: [] }
24+
25+
componentDidMount() {
26+
fetchSomeComments(comments => this.setState({ comments: comments }))
27+
}
28+
29+
render() {
30+
return (
31+
<ul>
32+
{this.state.comments.map(c => (
33+
<li>{c.body}—{c.author}</li>
34+
))}
35+
</ul>
36+
)
37+
}
38+
}
39+
40+
ReactDOM.render(
41+
<CommentList />,
42+
document.getElementById("root")
43+
)
44+
```
45+
46+
Your component is responsible for both fetching data and presenting it. There's nothing wrong with this but you miss out on a few benefits of React.
47+
48+
`CommentList` can't be reused unless under the exact same circumstances.
49+
50+
Lets pull out data-fetching into a container component.
51+
52+
```jsx
53+
class CommentListContainer extends React.Component {
54+
state = { comments: [] }
55+
56+
componentDidMount() {
57+
fetchSomeComments(comments =>
58+
this.setState({ comments: comments }))
59+
}
60+
61+
render() {
62+
return <CommentList comments={this.state.comments} />
63+
}
64+
}
65+
```
66+
67+
Now, let's rework `CommentList` to take comments as a prop.
68+
69+
```js
70+
const CommentList = props =>
71+
<ul>
72+
{props.comments.map(c => (
73+
<li>{c.body}—{c.author}</li>
74+
))}
75+
</ul>
76+
```
77+
78+
What we got:
79+
* Separated our data-fetching and rendering concerns
80+
* Made our `CommentList` component reusable
81+
* Given `CommentList` the ability to set PropTypes

‎docs/destructuring-function-argument.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
id: destructuring-function-argument
3+
sidebar_label: Destructuring function argument
4+
title: Destructuring Function Argument
5+
description: Destructuring function argument | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['destructuring function argument', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Destructuring function argument
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
Destructuring can be applied to function arguments that are objects or arrays.
12+
13+
## For example
14+
15+
Without destructuring.
16+
17+
```jsx
18+
function Modal(props) {
19+
var onClickNext = props.onClickNext
20+
var step = props.step
21+
22+
return (
23+
<div>
24+
<h1>Step {step} - Name</h1>
25+
<Button onClick={onClickNext}>Next</Button>
26+
</div>
27+
)
28+
}
29+
```
30+
31+
This function expects a single object as an argument and it is destructured into onClickNext and step.
32+
33+
```jsx
34+
function ModalName({ onClickNext, step }) {
35+
return (
36+
<div>
37+
<h1>Step {step} - Name</h1>
38+
<Button onClick={onClickNext}>Next</Button>
39+
</div>
40+
)
41+
}
42+
```

‎docs/destructuring-rest-or-spread-operator.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
id: destructuring-rest-or-spread-operator
3+
sidebar_label: Destructuring rest/spread operator
4+
title: Destructuring Rest/Spread Operator
5+
description: Destructuring rest/spread operator | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['destructuring rest/spread operator', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Destructuring rest/spread operator
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
The `...` rest operator gathers the rest of the items in the props object argument and puts them in the variable rest.
12+
13+
The `...` rest in the JSX is actually JSX syntax for spreading the props in the the rest object into individual props.
14+
15+
## For example
16+
17+
Without using rest/spread.
18+
19+
```js
20+
function Modal(props) {
21+
var onClick = props.onClick
22+
var show = props.show
23+
var backdrop = props.backdrop
24+
25+
return (
26+
<Modal show={show} backdrop={backdrop}>
27+
<Button onClick={onClick}>Next</Button>
28+
</Modal>
29+
)
30+
}
31+
```
32+
33+
Destructuring rest/spread operator.
34+
35+
```js
36+
function Modal({ onClick, ...rest }) {
37+
return (
38+
<Modal {...rest}>
39+
<Button onClick={onClick}>Next</Button>
40+
</Modal>
41+
)
42+
}
43+
```

‎docs/destructuring.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
id: destructuring
3+
sidebar_label: What is destructuring?
4+
title: What is Destructuring?
5+
description: Destructuring | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['destructuring', 'react component injection', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Destructuring
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
Destructuring shown assigns properties of an object to variables of the same name. There is also a longhand syntax that allows you to assign to variables of different names.
12+
13+
Destructuring works with nested objects, with arrays, and can be used in variable declarations, function return values and function arguments.
14+
15+
## For example
16+
17+
Without destructuring.
18+
19+
```js
20+
class Modals extends Component {
21+
render() {
22+
const modalList = this.props.modalList
23+
const currIndex = this.state.currIndex
24+
const showModal = this.state.showModal
25+
26+
// ...
27+
}
28+
}
29+
```
30+
31+
Destructuring the objects `this.props` and `this.state`.
32+
33+
```js
34+
class ChainedModals extends Component {
35+
render() {
36+
const { modalList } = this.props
37+
const { currIndex, showModal } = this.state
38+
39+
// ...
40+
}
41+
}
42+
```

‎docs/external-templating-component.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
id: conditional-rendering-with-enum
3-
sidebar_label: Conditional rendering with enum
4-
title: Conditional Rendering with Enum
5-
description: Conditional rendering with enum | React Patterns, techniques, tips and tricks in development for Ract developer.
6-
keywords: ['conditional rendering with enum', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7-
version: Conditional rendering with enum
2+
id: external-templating-component
3+
sidebar_label: External templating component
4+
title: External Templating Component
5+
description: External templating component | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['external templating component', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: External templating component
88
image: /img/reactpatterns-cover.png
99
---
1010

1111
Last but not least there exist external solutions to deal with conditional renderings. They add control components to enable conditional renderings without JavaScript in JSX. Then it is not question anymore on how to use if else in React.
1212

13-
```jsx
13+
```js
1414
<Choose>
1515
<When condition={isLoading}>
1616
<div><p>Loading...</p></div>
@@ -21,4 +21,8 @@ Last but not least there exist external solutions to deal with conditional rende
2121
</Choose>
2222
```
2323

24-
Some people use it, personally I wouldn’t recommend it, JSX allows you to use the powerful set of JavaScript functionalities to handle conditional rendering, there is no need to add templating components to enable conditional rendering, a lot of people consider React including JSX as their library of choice, because they can handle the rendering with pure HTML and JS in JSX.
24+
Some people use it, personally I wouldn't recommend it.
25+
26+
JSX allows you to use the powerful set of JavaScript functionalities to handle conditional rendering. There is no need to add templating components to enable conditional rendering.
27+
28+
A lot of people consider React including JSX as their library of choice, because they can handle the rendering with pure HTML and JS in JSX.

‎docs/nested-destructuring.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
id: nested-destructuring
3+
sidebar_label: Nested destructuring
4+
title: Nested Destructuring
5+
description: Nested destructuring | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['nested destructuring', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Nested destructuring
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
Destructuring also applies to objects nested in objects.
12+
13+
## For example
14+
15+
Without destructuring:
16+
17+
```jsx
18+
function setIndexFromRoute(props) {
19+
const modalList = props.modalList
20+
const pathname = props.location.pathname
21+
22+
// ...
23+
}
24+
```
25+
26+
Destructuring the nested props object.
27+
28+
```jsx
29+
function setIndexFromRoute(props) {
30+
const { modalList, location: { pathname } } = props
31+
32+
// ...
33+
}
34+
```

‎docs/promises-over-callbacks.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
id: promises-over-callbacks
3+
sidebar_label: Promises over callbacks
4+
title: Promises over callbacks
5+
description: Promises over callbacks | React Patterns, techniques, tips and tricks in development for Ract developer.
6+
keywords: ['promises over callbacks', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
7+
version: Promises over callbacks
8+
image: /img/reactpatterns-cover.png
9+
---
10+
11+
For HTTP Request, our existing solution is to use callbacks.
12+
13+
```jsx
14+
request(url, (error, response) => {
15+
// handle success or error.
16+
});
17+
18+
doSomethingElse()
19+
```
20+
21+
A few problems exist with callbacks. One is known as [callback hell](http://callbackhell.com "Callback Hell"). A larger problem is decomposition.
22+
23+
The callback pattern require us to specify the task and the callback at the same time. By difference, promises allow us to specify and dispatch the request in one place.
24+
25+
```jsx
26+
promise = fetch(url) // fetch is a replacement for XMLHttpRequest
27+
```
28+
29+
And then add the callback later, and in a different place.
30+
31+
```jsx
32+
promise.then(response => {
33+
// handle the response
34+
})
35+
```
36+
37+
This also allows us to attach multiple handlers to the same task.
38+
39+
```jsx
40+
promise.then(response => {
41+
// handle the response.
42+
})
43+
44+
promise.then(response => {
45+
// do something else with the response.
46+
})
47+
```

‎sidebars.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ module.exports = {
2525
'external-templating-component',
2626
],
2727
},
28+
{
29+
'Destructuring': [
30+
'destructuring',
31+
'destructuring-function-argument',
32+
'nested-destructuring',
33+
'destructuring-rest-or-spread-operator',
34+
],
35+
},
36+
'promises-over-callbacks',
37+
'container-component',
2838
],
2939
},
3040
};

0 commit comments

Comments
 (0)