forked from dylan-cancelliere/learning-react-book
-
Notifications
You must be signed in to change notification settings - Fork 4
/
lightning.html
103 lines (85 loc) · 2.79 KB
/
lightning.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dealing with State</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class LightningCounter extends React.Component{
constructor(props) {
super(props);
this.state = {
strikes: 0
};
this.timerTick = this.timerTick.bind(this);
}
timerTick(){
this.setState({
strikes: this.state.strikes + 100
});
}
componentDidMount(){
setInterval(this.timerTick, 1000);
}
render() {
var counterStyle = {
color: "#66FFFF",
fontSize: 50
};
var count = this.state.strikes.toLocaleString();
return (
<h1 style={counterStyle}>{count}</h1>
);
}
}
class LightningCounterDisplay extends React.Component{
render(){
var commonStyle = {
margin: 0,
padding: 0
};
var divStyle = {
width: 250,
textAlign: "center",
backgroundColor: "#020202",
padding: 40,
fontFamily: "sans-serif",
color: "#999999",
borderRadius: 10
};
var textStyles = {
emphasis: {
fontSize: 38,
...commonStyle
},
smallEmphasis: {
...commonStyle
},
small: {
fontSize: 17,
opacity: 0.5,
...commonStyle
}
};
return (
<div style={divStyle}>
<LightningCounter/>
<h2 style={textStyles.smallEmphasis}>LIGHTNING STRIKES</h2>
<h2 style={textStyles.emphasis}>WORLDWIDE</h2>
<p style={textStyles.small}>(since you loaded this example)</p>
</div>
);
}
}
ReactDOM.render(
<LightningCounterDisplay/>,
document.querySelector("#container")
);
</script>
</body>
</html>