sample_react/backup.html at master · skojima123/sample_react · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
</head>
<body>
<div id="app">
</div>
<div id="countdown"></div>

<script src="react/build/react.js"></script>
<script>
    React.render(
            React.DOM.h1(
                    {
                        id: "h1-header"
                    },
                    "Hello Tokyo!"),
            document.getElementById("app")
    );

    var CountDown = React.createClass({
        getInitialState: function(){
            return {
                timeRemaining: 10
            }
        },
        tick: function(){
            var actualTimeRemaining = this.state.timeRemaining - 1;
            if (actualTimeRemaining == 0){
                this.setState({timeRemaining: 'Boom'})
                clearInterval(this.interval)
            } else {
                this.setState({timeRemaining: actualTimeRemaining})
            }
        },
        componentDidMount: function(){
            this.interval = setInterval(this.tick, 1000);
        },
        render: function () {
            if (this.state.timeRemaining === 'Boom'){
                return <p><img src="images/firework_icon.gif"></p>;
            }
            return this.state.timeRemaining;


        }
    });

    ReactDOM.render(
            <CountDown />,
            document.getElementById('countdown')
    );

</script>
</body>
</html>