react的基本认识

react特点

	1）虚拟DOM
    2）组件化，组件系统，在react中组件也是核心之一
    3）声明式
    4）JSX语法（vue中的模板）
    5）一次学习，随处编写（写网站，原生APP（RN），服务端渲染）

react的基本使用：

	 1）下载react.js，并引用react.js。
    2）还需要引入react-dom.js
    3）通过React.createElement创建虚拟DOM
    4）把虚拟DOM挂载到真实的DOM上

创建虚拟DOM的两种方式（这都需要写在script标签中）：

1）React.createElement （现在基本上不用）

let vDom = React.createElement('h1',{title:"hello react"},"hello react");

2）JSX语法（script type="text/babel"必写，需要babel对jsx语法进行编译）

引入babel.js可以把jsx语法，转成createElement语法

let vDOM = <h1 title="hello react">Hello React</h1>

把虚拟DOM挂载到真实的DOM上

ReactDOM.render(vDOM,document.getElementById("app"))

jsx总结：

	1）JSX本质就是一个虚拟DOM，最外层必须使用一个唯一的根标签进行包裹。
    2）JSX中的标签是成对出现的，如果是单标签也需要闭合
    3）JSX中的如果放JS代码，JS代码必须写在{}中
    4）JSX中中的{}中，可以放JS表达式（任何有值的内容都是表达式）
    5）JSX中要写注释，注释也需要放在{}中 {/*  */}
    6）JSX中要写行内样式，style={{}}
    7）JSX中的如果写class属性，需要写成className，写for属性，需要写成htmlFor

jsx中使用for循环

 students.map((item,index)=>{
 return <li key={index}>{item.name}----{item.age}</li>

组件

在react中创建组件有两种方式：

1）通过类的形式创建组件 目前还是主流

	class组件：
    1）类名也需要大写  类名表示组件名
    2）要把一个class当成一个组件，必须extends React.Component
    3）在类中，必须有一个钩子函数，这个钩子函数叫render
    4）在render函数中，必须去return一个JSX
    class Header extends React.Component{
        render(){
            return (
                <div>
                    <h1>我是一个Header组件</h1>
                </div>
            )
        }
    }
    ReactDOM.render(<Header />,document.getElementById("app"))

2）通过函数的形式创建组件 以后肯定是主流

	1）函数中必须return一个JSX
  	2）函数名必须大写，表示是一个组件名
  	function Header (){
        return(
            <div>
                <h1>我是Header组件</h1>
            </div>
        )
    }
    ReactDOM.render(<Header />,document.getElementById("app"))

ReactDOM.render渲染组件的流程

	1）判断渲染的是否是一个组件，判定的依据是看首字母是否大写。
    2）如果是组件，判断你的组件是通过函数创建地，还是通过类创建的。
        A）如果是函数创建的，得到函数的返回值，函数的返回值是一个JSX，从而得到虚拟DOM
        B）如果是class创建的，自动调用render钩子函数，这个钩子函数也是返回一个JSX，从而得到虚拟DOM
    3）有了虚拟DOM，react内部就会把虚拟DOm转化成真实DOM
    4）把转化后的真实DOM，挂载到app上面的

通过函数创建组件

此组件的数据源只能是props，说白了，函数内部不能有自己的状态，数据完全靠外面传入。

function MyHeader(props){
            return (
                <div>
                    <h1>
                        名字：{props.name}，
                        年龄是：{props.age}， 
                        分数是：{props.score}， 
                        地址：{props.address}，
                        isMerry: { props.isMerry }
                    </h1>
                    <ul>
                        {
                            props.hobby.map((item,index)=>{
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        ReactDOM.render(<MyHeader name="wc" age="100" score={ 99 } address="bj" hobby={ ['basketball','football'] } />,document.getElementById("app"))

// 对接收的数据进行校验

 MyHeader.propTypes = {
        name:PropTypes.string,
        address:PropTypes.string.isRequired
    }

    // 对接收的数据设置默认值
    MyHeader.defaultProps = {
        isMerry:"false"
    }