Skip to content

Commit 103982c

Browse files
BunlongBunlong
committed
fixed css
1 parent 370254d commit 103982c

File tree

4 files changed

+147
-9
lines changed

4 files changed

+147
-9
lines changed

‎async-initialization-in-componentdidmount.html

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,21 @@ <h1>
1717
</header>
1818
<h3>Table of Contents</h3>
1919
<ul>
20-
<li><a href="async_initialization_in_componentdidmount.html">Async initialization in componentDidMount()</a></li>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
</ul>
2124
</ul>
2225
<h3>Async initialization in componentDidMount()</h3>
23-
<ul>
24-
<li>You should avoid async initialization in componentWillMount(), componentWillMount() is called before render() that why setting state in this method will not trigger render() method.</li>
25-
</ul>
26-
<ul>
27-
<li>You should make async calls for component initialization in componentDidMount() instead of componentWillMount().</li>
28-
</ul>
26+
<p>
27+
You should avoid async initialization in <code>componentWillMount()</code>.
28+
</p>
29+
<p>
30+
<code>componentWillMount()</code> is called before render() that why setting state in this method will not trigger render() method.
31+
</p>
32+
<p>
33+
You should make async calls for component initialization in <code>componentDidMount()</code> instead of <code>componentWillMount()</code>.
34+
</p>
2935
<pre class="screen">
3036
function componentDidMount() {
3137
axios.get(`api/sms`)

‎container-component.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<html>
2+
<head>
3+
<title>Container component | React Patterns & Techniques</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
6+
<meta name="description" content="Container component. You should avoid async initialization in componentWillMount()">
7+
<meta name="keywords" content="react-patterns, patterns, react, javascript, react-native, reactjs, component, components, front-end, frontend, front-end-development, frontend-web, frontend-webdevelopment, frontend-components, frontend-app, react-app, react-component, react-components, react-techniques, reactjs-patterns">
8+
<meta name="Code Facebook" content="[email protected]">
9+
<link href="css/styles.css" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div id="container">
13+
<header>
14+
<h1>
15+
<a href="/">React Patterns & Techniques</a>
16+
</h1>
17+
</header>
18+
<h3>Table of Contents</h3>
19+
<ul>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
</ul>
24+
</ul>
25+
<h3>Container component</h3>
26+
<p>
27+
A container does data fetching and then renders its corresponding sub-component.
28+
</p>
29+
<p>
30+
Assume that you have a component that displays comments. You didn’t know about container components. So, you put everything in one place.
31+
</p>
32+
<pre class="screen">
33+
const fetchSomeComments = cb =>
34+
cb([
35+
{ author: "Bunlong VAN", body: "Nice to see you here!" },
36+
{ author: "You", body: "Thanks!" }
37+
]);
38+
39+
class CommentList extends React.Component {
40+
this.state = { comments: [] };
41+
42+
componentDidMount() {
43+
fetchSomeComments(comments => this.setState({ comments: comments }));
44+
}
45+
46+
render() {
47+
return (
48+
&lt;ul&gt;
49+
{this.state.comments.map(c => (
50+
&lt;li&gt;{c.body}—{c.author}&lt;/&gt;
51+
))}
52+
&lt;/ul&gt;
53+
);
54+
}
55+
}
56+
57+
ReactDOM.render(
58+
<CommentList />,
59+
document.getElementById("root")
60+
);
61+
</pre>
62+
<p>
63+
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.
64+
</p>
65+
<p>
66+
CommentList can’t be reused unless under the exact same circumstances.
67+
</p>
68+
<p>
69+
Lets pull out data-fetching into a container component.
70+
</p>
71+
<pre class="screen">
72+
class CommentListContainer extends React.Component {
73+
state = { comments: [] };
74+
75+
componentDidMount() {
76+
fetchSomeComments(comments =>
77+
this.setState({ comments: comments }));
78+
}
79+
80+
render() {
81+
return <CommentList comments={this.state.comments} />;
82+
}
83+
}
84+
</pre>
85+
<p>
86+
Now, let’s rework CommentList to take comments as a prop.
87+
</p>
88+
<pre class="screen">
89+
const CommentList = props =>
90+
&lt;ul&gt;
91+
{props.comments.map(c => (
92+
&lt;li&gt;{c.body}—{c.author}&lt;/li&gt;
93+
))}
94+
&lt;/ul&gt;
95+
</pre>
96+
<p class="caption">
97+
What we got:
98+
</p>
99+
<ul class="caption">
100+
<li>
101+
Separated our data-fetching and rendering concerns.
102+
</li>
103+
<li>
104+
Made our CommentList component reusable.
105+
</li>
106+
<li>
107+
Given CommentList the ability to set PropTypes.
108+
</li>
109+
</ul>
110+
</div>
111+
</body>
112+
</html>

‎css/styles.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ body {
22
background-color: white;
33
color: black;
44
line-height: 140%;
5-
margin-left: 1.3em;
5+
margin-left: 1em;
66
margin-right: 1em;
77
margin-top: 5%;
88
text-align: left;
@@ -60,6 +60,10 @@ ul {
6060
padding-left: 1em;
6161
}
6262

63+
ul.caption {
64+
padding-left: 2.2em;
65+
}
66+
6367
li {
6468
padding-left: 0;
6569
}
@@ -77,6 +81,7 @@ dd {
7781
}
7882

7983
p.caption {
84+
margin-left: 0;
8085
}
8186

8287
pre {
@@ -193,5 +198,17 @@ code {
193198
padding: 0.2em 0.4em;
194199
}
195200

201+
@media (max-width: 575px) {
202+
h1 {
203+
line-height: 38px;
204+
}
205+
}
206+
207+
@media (min-width: 768px) and (max-width: 991px) {
208+
h1 {
209+
line-height: 38px;
210+
}
211+
}
212+
196213
/*https://github.com/bbatsov/ruby-style-guide*/
197214
/*https://ruby-hacking-guide.github.io/load.html*/

‎index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ <h1>
1717
</header>
1818
<h3>Table of Contents</h3>
1919
<ul>
20-
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
</ul>
2124
</ul>
2225
</div>
2326
</body>

0 commit comments

Comments
 (0)