const log = (...value) => console.log(...value)
        
        import React from 'react';
        import ReactDOM from 'react-dom';

        const NotesList = React.createClass({
          render () {
            return (
              <ol>
                {
                  // map(obj, (v, i) => {}): 有2个参数
                  // this.props.children: 表示组件的所有子节点
                  // this.Children.map 处理 this.props.children 不用担心 children是什么类型
                  React.Children.map(this.props.children, (child, i, arr) => {
                    return <li>{child}</li>
                  })
                }
              </ol>
            )
          }
        })
        
        ReactDOM.render(
          <NotesList>
            <span>小花</span>
            <span>小蓝</span>
          </NotesList>,
          document.querySelector('.content')
        )





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

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

        function Person (props) {
          // props.children 表示给子组件 传递的所有内容
          return (
            <div className={`name - ${props.color}`}>
              {props.children}
            </div>
          )
        }

        function WelcomeDialog () {
          return (
            <Person color="bule">
              <h3>Welcome</h3>
              <p className="message">
                spacecraft!
              </p>
            </Person>
          )
        }

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




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

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

        function Contacts () {
          return <div>Contacts 内容</div>
        }

        function Chat () {
          return <div>right 内容</div>
        }

        function SplitPane (props) {
          return (
            <div>
              <div>
                {props.left}
              </div>
              <div>
                {props.right}
              </div>
            </div>
          )
        }

        function App () {
          // 通过属性 自定义组件内容
          return (
            <SplitPane
              left={
                <Contacts />
              }
              right={
                <Chat />
              } 
            />
          )
        }

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




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

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

        function Fancy (props) {
          return (
            <div className={props.color}>
              {props.children}
            </div>
          )
        }

        function Dialog (props) {
          return (
            <Fancy>
              <h1>
                {props.title}
              </h1>
              <p>{props.message}</p>
            </Fancy>
          )
        }

        function Welcome () {
          return (
            <Dialog
              title="Welcome"
              message="内容"
            />
          )
        }

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




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

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

        function Fancy (props) {
          return (
            <div>
              {props.children}
            </div>
          )
        }

        function Dialog (props) {
          return (
            <Fancy>
              {props.title} 
              {props.message}
              {props.children}          
            </Fancy>
          )
        }

        class Sign extends Component {
          constructor(props) {
            super(props)
            this.state = {
              login: ''
            }
          }

          handleChange (e) {
            this.setState({
              login: e.target.value
            })
          }

          handleSignUp () {
            log(this.state.login)
          }

          render () {
            return (
              <Dialog 
                title="标题"
                message="内容"
              >
                <input value={this.state.login} onChange={this.handleChange.bind(this)} />
                <button onClick={this.handleSignUp.bind(this)}>
                  button
                </button>
              </Dialog>
            )
          }
        }

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