build-react-js/index.html at master · Rafe/build-react-js · 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
<!doctype html>
<html>
  <head>
    <title>React Lab</title>
    <link rel='stylesheet' href='./node_modules/bootstrap/dist/css/bootstrap.min.css'/>
  </head>
  <body>
    <div id='container' class='container'></div>
    <!-- <script src='./react.js'></script> -->
    <script src='./node_modules/react/dist/react.js'></script>
    <script type='text/javascript'>
      var DOM = React.DOM
      var App = React.createClass({
        getInitialState: function() {
          return {
            name: 'React',
            timestamp: 0
          }
        },
        handleClick: function() {
          this.setState({
            name: 'BOOOOOOOOOOOOOOOOM!!!!',
            timestamp: new Date().getTime() - this.props.start
          })
        },
        render: function() {
          return DOM.div(null, [
            DOM.h1(null, ['Welcome to ' + this.state.name + '!!']),
            DOM.div(null, [
              DOM.p(null, ["Watchout for what React you're using... it might not be real!"]),
              DOM.p(null, ["React is running for " + this.state.timestamp + "ms"])
            ]),
            DOM.a({ className: 'btn btn-default', onClick: this.handleClick.bind(this) }, ["Click me!!!"])
          ])
        }
      })

      var start = new Date().getTime()
      React.render(
        React.createElement(App, { start: start }),
        document.getElementById('container')
      )
    </script>
  </body>
</html>