import React from 'react';
                import ReactDOM from 'react-dom';

                // 定义一个组件类
                // 组件名 第一个字母必须大写
                // 组件类只能包含一个顶级标签 否则报错
                let Message = React.createClass({
                    render (){
                        // this.props 接受父组件传递的参数
                        // class属性 要写成 className 
                        // {this.props.className} 不能带引号
                        // {this.props.className} 是只读属性 不能修改 否则报错
                        return <h1 className={this.props.className}>{this.props.name}</h1>;
                    }
                });

                ReactDOM.render(
                    // 引用组件 传一个参数name给组件
                    <Message name="小蓝" className="add"></Message>,
                    document.querySelector('#app')
                );




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

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

                // 定义组件组简单方式 编写一个函数 
                const Welcome = props => {
                    return <h3>{props.name}</h3>
                }

                ReactDOM.render(
                    // 可以用这种方式引入 自定义组件
                    <Welcome name="Sara" />,
                    document.querySelector('#box')
                )





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

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

                const Welcome = props => {
                    return <h3>{props.name}</h3>
                }

                // 在App组件里引用其他组件
                const App = v => {
                    return (
                        <div>
                            <Welcome name="小花" />
                            <Welcome name="小蓝" />
                            <Welcome name="小白" />
                        </div>
                    )
                }

                ReactDOM.render(
                    // 可以用这种方式引入 自定义组件
                    <App />,
                    document.querySelector('#box')
                )





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

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

                const json = {
                    avatarUrl: 'https://facebook.github.io/react/img/logo.svg',
                    name: '小花'
                }

                // 提取组件
                const Avatar = props => {
                    return (
                        <img 
                            className="Avatar"
                            src={props.user.avatarUrl} 
                            alt={props.user.name}
                        />
                    )
                }

                // 提取组件
                const UserInfo = props => {
                    return (
                        <div className="UserInfo">
                            <Avatar user={props.user} />
                            <div className="UserInfo-name">
                                {props.user.name}
                            </div>
                        </div>
                    )
                }

                const Comment = props => {
                    return (
                        <div className="Comment">
                            <UserInfo user={props.author} />
                        </div>
                    )
                }

                ReactDOM.render(
                    // 可以用这种方式引入 自定义组件
                    <Comment author={json} />,
                    document.querySelector('#box')
                )




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

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

                // 水是否会沸腾 文案
                function BoilingVerdict (props) {
                  if (props.celsius > 100) {
                    return <p>水会沸腾</p>
                  }
                  return <p>水不会沸腾</p>
                }

                // 华氏温度 转 摄氏温度
                function toCelsius (Faheit) {
                  return (Faheit - 32) * 5 / 9
                }

                // 摄氏温度 转 华氏温度
                function toFahrenheit (celsius) {
                  return (celsius * 9 / 5) + 32
                }

                class Calculator extends Component {
                  constructor(props) {
                    super(props)
                    this.state = {
                      temperature: '', 
                      scale: 'c'
                    }
                  }

                  handleCelsiusChange (temperature) {
                    this.setState({
                      scale: 'c',
                      temperature,
                    })
                  }

                  handleFahrenheitChange (temperature) {
                    this.setState({
                      scale: 'f',
                      temperature,
                    })
                  }

                  render () {
                    const scale = this.state.scale
                    const temperature = this.state.temperature
                    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature
                    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature

                    return (
                      <div>
                        <TemperatureInput
                          scale="c"
                          temperature={celsius}
                          onTemperatureChange={this.handleCelsiusChange.bind(this)} />

                        <TemperatureInput scale="f" 
                          scale="f"
                          temperature={fahrenheit}
                          onTemperatureChange={this.handleFahrenheitChange.bind(this)} />

                        <BoilingVerdict celsius={parseFloat(celsius)} />
                      </div>
                    )
                  }
                }

                const scaleNames = {
                  c: 'Celsius',
                  f: 'Faheit'
                }

                class TemperatureInput extends Component {
                  constructor(props) {
                    super(props)
                  }

                  handleChange (e) {
                    // this.props 接受父组件传递的参数
                    // this.props.属性 这些属性都是只读属性 不能修改 否则报错
                    this.props.onTemperatureChange(e.target.value)
                  }

                  render () {
                    const temperature = this.props.temperature
                    const scale = this.props.scale

                    return (
                      <div>
                        {scaleNames[scale]}
                        <input value={temperature} onChange={this.handleChange.bind(this)} />
                      </div>
                    )
                  }
                }

                // 转换 华氏温度 摄氏温度
                function tryConvert (temperature, convert) {
                  const input = parseFloat(temperature)
                  if (Number.isNaN(input)) {
                    return ''
                  }
                  const output = convert(input)
                  const rounded = Math.round(output * 1000) / 1000
                  return rounded.toString()
                }

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