React入门

一.React框架

    1.是一个JavaScript库，用于简化用户界面的设计。
    2.是Facebook开发并于2013年发布。
    3.基于JSX（JavaScript XML，使用XML标记将html，JavaScript混写）的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html，js
    混写。
    4.React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装。
    组件：是数据和逻辑的封装，提高了代码的复用率，便于测试和维护。

二.应用方式

1.传统方式：在页面中引入react库，进行开发

<script type="text/javascript" src="../js/react.development.js"></script>  
<script type="text/javascript" src="../js/react-dom.development.js"></script>  
<script type="text/javascript" src="../js/babel.min.js"></script> 

    react.development.js：是React框架的核心库
    react-dom.development.js：是react中与DOM有关的库
    babel.min.js： 类似编译器，将ES6代码编译成ES5的

    ReactDOM.render（element，container[，callback]）：将element元素渲染到container中
    
    React虚拟DOM

2.React脚手架方式

3.React的虚拟DOM：由ReactDOM.render函数渲染的DOM元素都是虚拟的

 二.JSX语法

1.将JavaScript语法写成XML格式：必须使用babel.js对jsx语法进行解析，通常的做法是
    <script type="text/babel"></script>
2.基本语法格式：
    const element = {
        <标签1></标签1>
        <标签2></标签2>
        <标签3></标签3>
    }
3.JSX的表达式：所以表达式都放在{}中
    （1）算术表达式：{}
    （2）条件表达式：不能使用if语句
    （3）嵌入表达式：{ 变量 }
    （4）对象表达式：{ 对象名.属性名 }
    （5）函数表达式：{ 函数名（【参数】） }
    （6）增强型函数表达式：通过传参的方式实现if的选择
    （7）数组表达式：{ 数组名 }
    （8）样式表达式：<标签名 style={ 样式名 }></标签名>
    （9）注释表达式：{/* 注释的内容 */}

三.React组件 

        可以将UI切分成一些独立的，可以复用的部件，这样有助于设计人员专注于构建每一个单独的组件。

        1.类组件：
        （1）创建类组件
           class 组件名 extends React.Component{
                return（）{ 
                     return （<标签名></标签名>）
                }
            }
        （2）将类组件渲染到实际DOM中：类组件名的首字母必须大写，ReactDOM.render(<类组                     组件名/>,document.getElementById('root'))
       2.函数组件：函数名就是组件名