react的基本使用

react的基本使用：

1）下载react.js，并引用react.js。
2）还需要引入react-dom.js
3）通过React.createElement创建虚拟DOM
4）把虚拟DOM挂载到真实的DOM上
js压缩包链接：
链接: https://pan.baidu.com/s/1bOug2U1rxNPLFnR6EgDBEA 提取码: 43ij

创建虚拟元素（虚拟DOM）的两种方式：

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

<div id="app"></div>
<script>
    // createElement 参数1表示要创建什么样的虚拟DOM   参数2虚拟DOM的属性  参数3虚拟DOM中的内容
    let vDom = React.createElement('h1',{title:"hello react"},"hello react");
    // render 参数1表示虚拟DOM  参数2表示把虚拟DOM挂载到哪个真实DOM上
    ReactDOM.render(vDom,document.getElementById("app"))
</script>

2）JSX语法

	<div id="app"></div>
	<!-- type="text/babel" 必写，因为需要babel对jsx语法进行编译 -->
    <script type="text/babel">
        // 创建一个虚拟DOM（通过JSX写法）   默认情况下，你写的JSX，浏览器是不能识别
        // <h1 title="hello react">Hello React</h1> 不能叫真实DOM  可以叫JSX元素，虚拟DOM，JSX对象
        let vDOM = <h1 title="hello react">Hello React</h1>
        ReactDOM.render(vDOM,document.getElementById("app"))
    </script>

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

在html中引入js：

1）引入react.js 类似于vue.js 2）引入react-dom.js 提供了dom操作的扩展 3）引入一个babel.js 可以把jsx语法，转成createElement语法

JXS中循环数据必须用map

    <script type="text/babel">
        let students = [
            {name:"彭万里",age:10},
            {name:"高大山",age:11},
            {name:"谢大海",age:12},
            {name:"马宏宇",age:13},
            {name:"林莽",age:14},
        ]
        let vDOM = (<ul>
           { students.map((item,index)=>{
                return <li key={index}>{item.name}----{item.age}</li>
           }) }
        </ul>);
        ReactDOM.render(vDOM,document.getElementById("app"))
    </script>

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

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

在react中，为了和普通的html标签区分，规定了，react中的组件名必须大写。

函数式组件（无状态组件）

1）函数中必须return一个JSX
2）函数名必须大写，表示是一个组件名

     <div id="app"></div>
     <script type="text/babel">
        // 如果一个函数reutrn了一个jsx，那么这个函数就可以称为一个组件
        function Header(){
            return(
                <div>
                    <h1>我是Header组件</h1>
                </div>
            )
        }
        // render的第1个参数可以是一个组件，之前render的是一个虚拟DOM
        // 在react中，使用组件当成html标签来使用就OK了
        ReactDOM.render(<Header />,document.getElementById("app"))
     </script>

class组件：

1）类名也需要大写 类名表示组件名
2）要把一个class当成一个组件，必须extends React.Component
3）在类中，必须有一个钩子函数，这个钩子函数叫render
4）在render函数中，必须去return一个JSX

     <div id="app"></div>
     <script type="text/babel">
        class Header extends React.Component{
            render(){
                return (
                    <div>
                        <h1>我是一个Header组件</h1>
                    </div>
                )
            }
        }
        ReactDOM.render(<Header />,document.getElementById("app"))
     </script>

ReactDOM.render渲染组件的流程：

1）判断渲染的是否是一个组件，判定的依据是看首字母是否大写。
2）如果是组件，判断你的组件是通过函数创建地，还是通过类创建的。

 A）如果是函数创建的，得到函数的返回值，函数的返回值是一个JSX，从而得到虚拟DOM
 B）如果是class创建的，自动调用render钩子函数，这个钩子函数也是返回一个JSX，从而得到虚拟DOM

3）有了虚拟DOM，react内部就会把虚拟DOm转化成真实DOM
4）把转化后的真实DOM，挂载到app上面的

使用函数创建组件，此组件的数据源只能是props，说白了，函数内部不能有自己的状态，数据完全靠外面传入。
对传入的数据进行校验：使用prop-types.js

     <div id="app"></div>
     <script type="text/babel">
        //  props是形参 写abc也可以  通常会写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>
            )
        }
        // 对接收的数据进行校验
        MyHeader.propTypes = {
            name:PropTypes.string,
            address:PropTypes.string.isRequired
        }
        // 对接收的数据设置默认值
        MyHeader.defaultProps = {
            isMerry:"false"
        }
        // name="wc" 叫自定义属性  wc是字符串  100也是字符串 99是nubmer
        ReactDOM.render(<MyHeader name="wc" age="100" score={ 99 } address="bj" hobby={ ['basketball','football'] } />,document.getElementById("app"))
     </script>