FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
learning-react/Chapter10.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
/
Chapter10.html
Copy path
More file actions
More file actions
Latest commit
History
History
History
113 lines (108 loc) · 2.49 KB
Breadcrumbs
learning-react
/
Chapter10.html
Copy path
File metadata and controls
113 lines (108 loc) · 2.49 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
<!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
Chapter 10!
</
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
PlusButton
=
React
.
createClass
(
{
render
:
function
(
)
{
var
buttonStyle
=
{
fontSize
:
"1em"
,
width
:
30
,
height
:
30
,
fontFamily
:
"sans-serif"
,
color
:
"#333"
,
fontWeight
:
"bold"
,
lineHeight
:
"3px"
}
;
return
(
<
button
style
=
{
buttonStyle
}
onClick
=
{
this
.
props
.
clickHandler
}
>
+
</
button
>
)
;
}
}
)
;
var
CounterParent
=
React
.
createClass
(
{
handleResize
:
function
(
e
)
{
this
.
setState
(
{
count
:
window
.
innerWidth
+
window
.
innerHeight
}
)
;
}
,
componentDidMount
:
function
(
)
{
window
.
addEventListener
(
"resize"
,
this
.
handleResize
)
;
}
,
componentWillUnmount
:
function
(
)
{
window
.
removeEventListener
(
"resize"
,
this
.
handleResize
)
;
}
,
getInitialState
:
function
(
)
{
return
{
count
:
window
.
innerWidth
+
window
.
innerHeight
}
;
}
,
increase
:
function
(
e
)
{
this
.
setState
(
{
count
:
this
.
state
.
count
+
(
e
.
shiftKey
?
10
:
1
)
}
)
;
}
,
render
:
function
(
)
{
var
backgroundStyle
=
{
padding
:
50
,
backgroundColor
:
"#FFC53A"
,
width
:
250
,
height
:
100
,
borderRadius
:
10
,
textAlign
:
"center"
}
;
return
(
<
div
style
=
{
backgroundStyle
}
>
<
Counter
display
=
{
this
.
state
.
count
}
/>
<
PlusButton
clickHandler
=
{
this
.
increase
}
/>
</
div
>
)
;
}
}
)
;
ReactDOM
.
render
(
<
div
>
<
CounterParent
/>
</
div
>
,
destination
)
;
}
(
)
)
;
</
script
>
</
body
>
</
html
>
Back
|
FazBrowse Home
|
New Git URL