组件:
	- 组件在react中非常重要
	- 所谓组件，其实在react中就是‘类’的概念
		类的定义形式
			ES6  class
			ES5  函数

注意: 组件名字，首字母需要大写

组件定义两种方式：
	1. 函数
	2. class类

函数:
	定义:
		function Title(){
			return xxxx
		}

		const Title = ()=><h3>标题3</h3>;
	调用:
		<Title />
		<Title></Title>
类定义方式:
	class Title extends React.Component{
	    render(){
	        return <h3>标题3</h3>
	    }
	}

函数定义组件和类定义区别:
		生命周期	状态(state)	this指向
	函数:	无		无		乱
	类:	有		有		靠谱

子组件里面内容:

	this.props.children	组件的内容

<script type="text/babel">
    function Title(){ //组件
        return <h3>标题3</h3>
    }

    ReactDOM.render(
        <Title />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    /* function Title(){ //组件
        return <h3>标题3</h3>
    } */
    class Title extends React.Component{
        render(){
            return <h3>标题3</h3>
        }
    }

    ReactDOM.render(
        <Title />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    // function Title(){ //组件
    //     return <h3>标题3</h3>
    // }
    const Title = ()=><h3>标题3</h3>;

    ReactDOM.render(
        <Title />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    /* let {Component} = React;

    class Title extends Component{
        render(){
            let {name,age} = this.props;
            return <h3>{name} {age}</h3>
        }
    }

    class App extends Component{
        render(){
            return (<div>
                <Title name="体育标题" age="18" />
                <Title name="新闻标题" age="18" />
                <Title name="IT标题" age="18" />
            </div>)
        }
    } */
    const Title = (props) => <h3>{props.name}</h3>

    const App = () =>{
        return (<div>
            <Title name="aaa" />
            <Title name="bbb" />
            <Title name="ccc" />
        </div>)
    }

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


<script type="text/babel">

    class Child extends React.Component{
        render(){
            let {title} = this.props;
            return (<div>
                <strong>{title}</strong>
            </div>)
        }
    }

    class Parent extends React.Component{
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child title="子组件咋地" />
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>


<script type="text/babel">

    class Child extends React.Component{
        render(){
            let {title, children} = this.props;
            return (<div>
                <strong>{title}</strong>
                {children}
            </div>)
        }
    }

    class Parent extends React.Component{
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child title="子组件咋地">
                    <ul>
                        <li>aaaa</li>
                        <li>bbb</li>
                        <li>ccc</li>
                    </ul>
                </Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">

    class Child extends React.Component{
        render(){
            let {title, children} = this.props;
            return (<div>
                <strong>{title}</strong>
                {children}
            </div>)
        }
    }
    const List = ({arr}) =><ul>
        {
            arr.map((val,index)=>
                <li key={index}>{val}</li>
            )
        }
    </ul>
    class Parent extends React.Component{
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child title="子组件咋地">
                    <List arr={['apple','banana','orange']} />
                </Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>


<script type="text/babel">

    /* class Child extends React.Component{
        render(){
            let {title, children} = this.props;
            return (<div>
                <strong>{title}</strong>
                {children}
            </div>)
        }
    } */
    const Child = ({title,children}) =>(<div>
        <strong>{title}</strong>
        {children}
    </div>)


    const List = ({arr}) =><ul>
        {
            arr.map((val,index)=>
                <li key={index}>{val}</li>
            )
        }
    </ul>
    class Parent extends React.Component{
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child title="子组件咋地">
                    <List arr={['apple','banana','orange']} />
                </Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>