React初接触--小Demo

<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
        );
    </script>
        <!-- 
        目标容器只能是Dom对象，JQuery对象不支持
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            $("#example")[0]
        ); -->
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var names = ['小A', '小B', '小C'];
        ReactDOM.render(
            <div>
            {
                names.map(function (name) {
                    return <h3>Hello, my name is {name}!</h3>
                })
            }
            </div>,
        document.getElementById('example')
      );
    </script>
 </body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var arr = [
            <h1>Hello world!</h1>,
            <h2>Glad to see you!</h2>,
        ];
        ReactDOM.render(
            <div>{arr}</div>,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render: function() {
                return <h1>Hello {this.props.name}</h1>;
            }
        });

        ReactDOM.render(
            <HelloMessage name="John" />,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var NotesList = React.createClass({
            render: function() {
                return (
                    <ol>
                        {
                            React.Children.map(this.props.children, function (child) {
                                return <li>{child}</li>;
                            })
                        }
                    </ol>
                );
            }
        });

        ReactDOM.render(
            <NotesList>
                <span>hello</span>
                <span>world</span>
            </NotesList>,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var data = 123;
        var MyTitle = React.createClass({
            propTypes: {
                title: React.PropTypes.string.isRequired,
            },
            render: function() {
                return <h1> {this.props.title} </h1>;
            }
        });

        ReactDOM.render(
            <MyTitle title={data} />,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var MyComponent = React.createClass({
            handleClick: function(e) {
                this.refs.myTextInput.focus();
                this.refs.myTextInput.value = 123;
                e.target.value = "cliked";
            },
            render: function() {
                return (
                    <div>
                        <input type="text" ref="myTextInput" />&ensp;
                        <input type="button" value="Please click here!" onClick={this.handleClick} />
                    </div>
                );
            }
        });

        ReactDOM.render(
            <MyComponent />,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var LikeButton = React.createClass({
            getInitialState: function() {
                return {liked: false};
            },
            handleClick: function(event) {
                this.setState({liked: !this.state.liked});
            },
            render: function() {
                var text = this.state.liked ? 'like' : 'don\'t liked';
                return (
                    <p onClick={this.handleClick}>
                        You {text} this. Click to toggle.
                    </p>
                );
            }
        });

        ReactDOM.render(
            <LikeButton />,
            document.getElementById('example')
        );
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var Input = React.createClass({
            getInitialState: function() {
                return {value: 'Hello!'};
            },
            handleChange: function(event) {
                this.setState({value: event.target.value});
            },
            render: function () {
                var value = this.state.value;
                return (
                    <div>
                        <input type="text" value={value} onChange={this.handleChange} />
                        <p>{value}</p>
                    </div>
                );
            }
        });

        ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>
</body>

<body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello = React.createClass({
            getInitialState: function () {
                return {
                    opacity: 1.0
                };
            },

            componentDidMount: function () {
                this.timer = setInterval(function () {
                    var opacity = this.state.opacity;
                    opacity -= .05;
                    if (opacity < 0.1) {
                        opacity = 1.0;
                    }
                    this.setState({
                        opacity: opacity
                    });
                }.bind(this), 100);
            },

            render: function () {
                return (
                    <div style={{opacity: this.state.opacity, color: "red", backgroundColor: "blue", width: "100px"}}>
                        Hello {this.props.name}
                    </div>
                );
            }
        });

        ReactDOM.render(
            <Hello name="world"/>,
            document.getElementById('example')
        );
    </script>
</body>

React初接触--小Demo

猜你喜欢