const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            const UserGreeting = props => {
              return <h3>小花</h3>
            }

            const GuestGreeting = props => {
              return <h3>小蓝</h3>
            }

            // 根据条件判断输出哪个组件
            const Greeting = props => {
              const isLoggedIn = props.isLoggedIn

              if (isLoggedIn) {
                return <UserGreeting />
              }
              return <GuestGreeting />
            }

            ReactDOM.render(
              <Greeting isLoggedIn={false} />,
              document.querySelector('#box')
            )




            const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            // 登陆组件
            const LoginButton = props => {
              return (
                <button onClick={props.onClick}>
                  Login
                </button>
              )
            }

            // 登出组件
            const LogoutButton = props => {
              return (
                <button onClick={props.onClick}>
                  Logout
                </button>
              )
            }

            class LoginControl extends Component {
              constructor (props) {
                super(props)
                this.state = {isLoggedn: false}
              }

              handleloginClick () {
                this.setState({
                  isLoggedIn: true
                })
              }

              handleLogoutClick () {
                this.setState({
                  isLoggedIn: false
                })
              }

              render () {
                const isLoggedIn = this.state.isLoggedIn
                let button = null
                
                // 给LogoutButton组件 绑定onClick属性 供LogoutButton组件调用 
                if (isLoggedIn) {
                  button = <LogoutButton onClick={this.handleLogoutClick.bind(this)} />
                } else {
                  button = <LoginButton onClick={this.handleloginClick.bind(this)} />
                }

                return (
                  <div>
                    { button }
                  </div>
                )
              }
            }

            ReactDOM.render(
              <LoginControl />,
              document.querySelector('#box')
            )            
            



            const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            const messages = ['React', 'Re', 'Vue', 'ECMA6']

            const Mailbox = props => {
              const messages = props.message

              // JSX里想写javascript 必须带{} 
              return (
                <div>
                  {messages.length > 0 && <h2>{messages.length}</h2>}
                </div>
              )
            }

            ReactDOM.render(
              <Mailbox message={messages} />,
              document.querySelector('#box')
            )




            const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            // Button 组件
            const Button = props => {
              return (
                <button onClick={props.onClick}>Submit</button>
              )
            }

            // ButtonClick 组件
            class ButtonClick extends Component {
              constructor(props) {
                super(props);
                this.state = {
                  isLoggedIn: false
                }
              }

              handleLogin (props) {
                this.setState({
                  isLoggedIn: true
                })
              }

              render () {
                const isLoggedIn = this.state.isLoggedIn
                // JSX中可以使用三目运算符
                // 给Button组件 绑定onClick属性 供Button组件调用
                return (
                  <div>
                    { isLoggedIn ? '输出真' : '输出假' }
                    <Button onClick={ this.handleLogin.bind(this) } />
                  </div>
                )
              }
            }

            ReactDOM.render(
              <ButtonClick />,
              document.querySelector('#box')
            )




            const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            const WarningBanner = props => {
              if (!props.warn) {
                return null
              }

              return (
                <div className="warning">
                  Warning!
                </div>
              )
            }

            class Page extends Component {
              constructor(props) {
                super(props);
                this.state = {showWarning: true}
              }

              handleToggleClick () {
                this.setState(prevState => ({
                  showWarning: !prevState.showWarning
                }))
              }

              render () {
                return (
                  <div>
                    <WarningBanner warn={this.state.showWarning} />
                    <button onClick={this.handleToggleClick.bind(this)}>
                      {this.state.showWarning ? 'Hide' : 'SHow'}
                    </button>
                  </div>
                )
              }
            }

            ReactDOM.render(
              <Page />,
              document.querySelector('#box')
            )