React-Instance/hello world.html at master · chenDiDi/React-Instance · 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
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <title>hello world react</title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="root">
        <!--应用渲染的位置-->
    </div>
    <div id="app">
        <!--应用渲染的位置-->
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
    <script>
        ReactDOM.render(
            React.DOM.h1(
                {id: 'my-firstDemo'},
                React.DOM.span(null, React.DOM.em(null, 'react ')),
                'hello world!'
            ),
            document.getElementById('app')
        );
        var Component = React.createClass({
            propTypes: {
              name: React.PropTypes.string.isRequired,
              age: React.PropTypes.number.isRequired,
              text: React.PropTypes.string,
            },
            getDefaultProps: function () {
              return {
                  name: 'nonon',
                  age: 12,
                  text: '',
              }
            },
            getInitialState: function () {
              return {
                  text: this.props.text,
              }
            },
            _textChange: function (ev) {
                console.log(ev.target.value);
              this.setState({
                  text: ev.target.value,
              });
            },
            render: function () {
                return React.DOM.div(null,
                    React.DOM.span(null, "componentDid  " + this.props.name+ this.props.age+ "  " + this.state.text.length),
                    React.DOM.textarea({
                        value: this.state.text,
                        onChange: this._textChange,
                    })
                )
            }
        });
        ReactDOM.render(
            React.createElement(Component, {name: 'didi'}),
            document.getElementById('root')
        );
    </script>
</body>
</html>