Skip to content

Commit ee2f6c6

Browse files
BunlongBunlong
committed
add home page and async page
1 parent 6607b0f commit ee2f6c6

File tree

3 files changed

+264
-2
lines changed

3 files changed

+264
-2
lines changed

‎async_initialization_in_componentdidmount.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<html>
2+
<head>
3+
<title>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="React patterns & techniques to use in development!">
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+
<li><a href="async_initialization_in_componentdidmount.html">Async initialization in componentDidMount()</a></li>
21+
</ul>
22+
<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>
29+
<pre class="screen">
30+
function componentDidMount() {
31+
axios.get(`api/sms`)
32+
.then((result) => {
33+
const sms = result.data
34+
console.log("COMPONENT WILL Mount messages : ", sms);
35+
this.setState({
36+
sms: [...sms.content]
37+
})
38+
})
39+
}
40+
</pre>
41+
</div>
42+
</body>
43+
</html>

‎css/styles.css

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
body {
2+
background-color: white;
3+
color: black;
4+
line-height: 140%;
5+
margin-left: 1.3em;
6+
margin-right: 1em;
7+
margin-top: 5%;
8+
text-align: left;
9+
}
10+
11+
#container {
12+
width: 50%;
13+
position: relative;
14+
margin:0 auto;
15+
margin-left: 0;
16+
line-height: 1.4em;
17+
float: left;
18+
margin-bottom: 7%;
19+
}
20+
21+
@media only screen and (max-width: 479px){
22+
#container { width: 100%; }
23+
}
24+
25+
h1 {
26+
border-left: 80px solid #4267b2;
27+
font-size: 200%;
28+
line-height: 80px;
29+
margin-bottom: 1em;
30+
margin-top: 0;
31+
padding-left: 12px;
32+
text-align: left;
33+
}
34+
35+
h2 {
36+
border-bottom: 2px solid #4267b2;
37+
font-size: 150%;
38+
margin-bottom: 1em;
39+
margin-top: 3em;
40+
text-align: left;
41+
}
42+
43+
h3 {
44+
border-left: 12px solid #4267b2;
45+
font-size: 150%;
46+
margin-bottom: 0.1em;
47+
margin-top: 1em;
48+
padding-left: 8px;
49+
text-align: left;
50+
}
51+
52+
h4 {
53+
font-size: 150%;
54+
margin-bottom: 0.1em;
55+
margin-top: 1em;
56+
text-align: left;
57+
}
58+
59+
ul {
60+
padding-left: 1em;
61+
}
62+
63+
li {
64+
padding-left: 0;
65+
}
66+
67+
dl {
68+
margin: 0;
69+
}
70+
71+
dt {
72+
margin: 0.5em 0 0.2em;
73+
}
74+
75+
dd {
76+
margin: 0 0 0 4em;
77+
}
78+
79+
p.caption {
80+
}
81+
82+
pre {
83+
background: none repeat scroll 0 0 #eee;
84+
line-height: 120%;
85+
padding: 8px;
86+
overflow-x: auto;
87+
}
88+
89+
span.ami {
90+
background-color: #ccc;
91+
color: black;
92+
}
93+
94+
.image {
95+
margin-bottom: 2em;
96+
margin-top: 2em;
97+
}
98+
99+
address {
100+
font-style: normal;
101+
line-height: 110%;
102+
text-align: right;
103+
}
104+
105+
a:link, a:visited {
106+
color: #4267b2;
107+
text-decoration: none;
108+
}
109+
110+
a:active, a:visited {
111+
color: #4267b2;
112+
text-decoration: none;
113+
}
114+
115+
a:hover, a:focus {
116+
text-decoration: underline;
117+
}
118+
119+
footer {
120+
margin-top: 2em;
121+
}
122+
123+
body {
124+
font-family: Georgia,serif;
125+
}
126+
127+
h1 code, h2 code, h3 code, h4 code, h5 code {
128+
font-family: Menlo,Monaco,"Andale Mono","Lucida console","courier New",monospace;
129+
font-weight: normal;
130+
}
131+
132+
pre {
133+
font-family: Menlo,Monaco,"Andale Mono","Lucida console","courier New",monospace;
134+
font-size: 0.8em;
135+
}
136+
137+
code {
138+
font-family: Menlo,Monaco,"Andale Mono","Lucida console","courier New",monospace;
139+
font-size: 0.8em;
140+
}
141+
142+
h1#chapter {
143+
font-size: 150%;
144+
}
145+
146+
th {
147+
padding-right: 0.5em;
148+
}
149+
150+
pre.longlist, pre.screen {
151+
background: none repeat scroll 0 0 #eee;
152+
margin-left: 17px;
153+
padding: 8px;
154+
}
155+
156+
pre.emlist {
157+
background: none repeat scroll 0 0 white;
158+
padding-left: 2em;
159+
}
160+
161+
p {
162+
/*width: 35em;*/
163+
margin-left: 17px;
164+
}
165+
166+
.image ul {
167+
font-size: 0.8em;
168+
list-style-type: none;
169+
margin: 0;
170+
padding-left: 0;
171+
}
172+
173+
.image p {
174+
margin: 0;
175+
}
176+
177+
div.longlist {
178+
background: none repeat scroll 0 0 #eee;
179+
font-family: Menlo,Monaco,"Andale Mono","Lucida console","courier New",monospace;
180+
font-size: 0.8em;
181+
padding: 8px;
182+
}
183+
184+
div.longlist p {
185+
margin: 0;
186+
}
187+
188+
code {
189+
background-color: rgba(0, 0, 0, 0.04);
190+
border-radius: 3px;
191+
font-size: 85%;
192+
margin: 0;
193+
padding: 0.2em 0.4em;
194+
}
195+
196+
/*https://github.com/bbatsov/ruby-style-guide*/
197+
/*https://ruby-hacking-guide.github.io/load.html*/

‎index.html

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,24 @@
1-
Coming soon!
2-
1+
<html>
2+
<head>
3+
<title>Index</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="React patterns & techniques to use in development!">
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+
<li><a href="async_initialization_in_componentdidmount.html">Async initialization in componentDidMount()</a></li>
21+
</ul>
22+
</div>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)