FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
learning-react/Chapter11.html at master · Developerworld-me/learning-react · GitHub
Uh oh!
There was an error while loading.
Please reload this page
.
Developerworld-me
/
learning-react
Public
forked from
herstand/learning-react
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Pull requests
0
Actions
Projects
Wiki
Security and quality
0
Insights
Additional navigation options
Code
Pull requests
Actions
Projects
Wiki
Security and quality
Insights
Expand file tree
Breadcrumbs
learning-react
/
Chapter11.html
Copy path
More file actions
More file actions
Latest commit
History
History
History
122 lines (116 loc) · 3.16 KB
Breadcrumbs
learning-react
/
Chapter11.html
Copy path
File metadata and controls
122 lines (116 loc) · 3.16 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
Chapter 11!
</
title
>
<
style
type
='
text/css
'
>
html
,
body
{
padding
:
0
;
margin
:
0
;
width
:
100
%
;
height
:
100
%
;
}
#
container
{
width
:
100
%
;
height
:
100
%
;
padding
:
50
px
;
background-color
:
#
FFFFFF
;
}
</
style
>
<
script
src
="
react/react.js
"
>
</
script
>
<
script
src
="
react/react-dom.js
"
>
</
script
>
<
script
src
="
react/babel.min.js
"
>
</
script
>
</
head
>
<
body
>
<
main
id
="
container
"
>
</
main
>
<
script
type
="
text/babel
"
>
(
function
(
)
{
var
destination
=
document
.
querySelector
(
"#container"
)
;
var
Counter
=
React
.
createClass
(
{
render
:
function
(
)
{
var
textStyle
=
{
fontSize
:
72
,
fontFamily
:
"sans-serif"
,
color
:
"#333"
,
fontWeight
:
"bold"
}
;
return
(
<
div
style
=
{
textStyle
}
>
{
this
.
props
.
display
}
</
div
>
)
;
}
}
)
;
var
CounterParent
=
React
.
createClass
(
{
getDefaultProps
:
function
(
)
{
console
.
log
(
"getDefaultProps: Default prop time!"
)
;
return
{
}
;
}
,
getInitialState
:
function
(
)
{
console
.
log
(
"getInitialState: Default state time!"
)
;
return
{
count
:
0
}
;
}
,
increase
:
function
(
)
{
this
.
setState
(
{
count
:
this
.
state
.
count
+
1
}
)
;
}
,
componentWillUpdate
:
function
(
newProps
,
newState
)
{
console
.
log
(
"componentWillUpdate: Component is about to update!"
)
;
}
,
componentDidUpdate
:
function
(
currentProps
,
currentState
)
{
console
.
log
(
"componentDidUpdate: Component just updated!"
)
;
}
,
componentWillMount
:
function
(
)
{
console
.
log
(
"componentWillMount: Component is about to mount!"
)
;
}
,
componentDidMount
:
function
(
)
{
console
.
log
(
"componentDidMount: Component just mounted!"
)
;
}
,
componentWillUnmount
:
function
(
)
{
console
.
log
(
"componentWillUnmount: Component is about to be removed from the DOM!"
)
;
}
,
shouldComponentUpdate
:
function
(
newProps
,
newState
)
{
console
.
log
(
"shouldComponentUpdate: Should component update?"
)
;
if
(
newState
.
count
<
5
)
{
console
.
log
(
"shouldComponentUpdate: Component should update!"
)
;
return
true
;
}
else
{
console
.
log
(
"shouldComponentUpdate: Component should not update!"
)
;
ReactDOM
.
unmountComponentAtNode
(
destination
)
;
return
false
;
}
}
,
componentWillReceiveProps
:
function
(
newProps
)
{
console
.
log
(
"componentWillReceiveProps: Component will get new props!"
)
;
}
,
render
:
function
(
)
{
var
backgroundStyle
=
{
padding
:
50
,
border
:
"#333 2px dotted"
,
width
:
250
,
height
:
100
,
borderRadius
:
10
,
textAlign
:
"center"
}
;
return
(
<
div
style
=
{
backgroundStyle
}
>
<
Counter
display
=
{
this
.
state
.
count
}
/>
<
button
onClick
=
{
this
.
increase
}
>
+
</
button
>
</
div
>
)
;
}
}
)
;
ReactDOM
.
render
(
<
div
id
=
"blah"
>
<
CounterParent
/>
</
div
>
,
destination
)
;
}
(
)
)
;
</
script
>
</
body
>
</
html
>
Back
|
FazBrowse Home
|
New Git URL