React16学习笔记（二）-------JSX

JSX（Javascript的语法扩展）基本语法

一、{}内嵌Javascript表达式：

1. 内部添加运算、字符串、数组、js标签

import React from "react"

// 创建类继承react.Component类
class Welcome extends React.Component{
    //组件最终显现出来的结果
    render(){
        
        return(
            <div>
            <h1>Hello React</h1>
           {/* 数组 */}
            {[1,3,2]}
            <br/>
            {/* 字符串 */}
            {'sdfa'}
            {/* 运算 */}
            <br/>
            {1+2}

            <p>This is new</p>

            </div>
        )
    }
}

//导出整个类
export default Welcome

2. 添加列表，循环列表

import React from "react"

// 创建类继承react.Component类
class Welcome extends React.Component{
    //组件最终显现出来的结果
    render(){
        // 定义列表内容
        const todoList = ['Leatn React','Learn Redux']
        return(
            <div>
            <h1>Hello React</h1>
            <ul>
                {
                    // 展示列表内容
                    todoList.map(item=>
                        <li>{item}</li>    
                    )
                }
            </ul>
            </div>
        )
    }
}

//导出整个类
export default Welcome

3. 判断（三元表达式）

import React from "react"

// 创建类继承react.Component类
class Welcome extends React.Component{
    //组件最终显现出来的结果
    render(){
        
        const isLoad = false
        return(
            <div>
            <h1>Hello React</h1>
            
                {
                   isLoad ? <p>您已经登录</p> : <p>您还没有登录</p>
                }
            
            </div>
        )
    }
}

//导出整个类
export default Welcome

二、 JSX属性

与HTML属性相似，其中class和for因为有冲突所以需要起别名

import React from "react"

// 创建类继承react.Component类
class Welcome extends React.Component{
    //组件最终显现出来的结果
    render(){
        
        const isLoad = false
        return(
            <div className="this" htmFor="">
            <h1>Hello React</h1>
            
                {
                   isLoad ? <p>您已经登录</p> : <p>您还没有登录</p>
                }
            
            </div>
        )
    }
}

//导出整个类
export default Welcome

三、编译（BABEL在线工具）

1. 属性
   
2. 组价
   
3. 总结：
   它是一种语法糖 - React.createElement(),本质上只是一个ReactElement对象
   ReactDOM.render方法就是将对象通过特定的算法渲染到真是的dom节点呈现在页面上