• 2013年5月开源

实例

<div id="box"></div>
<script type="text/babel">
    class HelloWorld extends React.Component {
        render() {
            return (
                <div>
                    <h2>{this.props.text}</h2>  
                    <p>{this.props.children}</p>
                </div>
            )
        }
    }

    ReactDOM.render(
        <div>
            <HelloWorld text="hello">
                react
            </HelloWorld >      
            <HelloWorld text="hello">
                osoLife
            </HelloWorld >
        </div>,
        document.getElementById('box')
    )
</script>

<div id="box"></div>
<script type="text/babel">
    class Checkbox extends React.Component {
        constructor() {
            super();
            this.state={
                checked:false
            };
            this.handleClick=this.handleClick.bind(this);
        }

        handleClick() {
            this.setState({
                checked:!this.state.checked
            });
        }
            
        render() {
            var msg;
            if(this.state.checked) {
                msg="勾选"
            }else {
                msg="未勾选"
            }
            return (
                <div>
                    <input type="checkbox" onChange={this.handleClick} />
                    <p>checkbox状态：{msg}</p>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Checkbox />,
        document.getElementById('box')
    )
</script>