create-react-app

https://www.html.cn/create-react-app/
安装脚手架
$ npm i create-react app

$ npx create-react-app my-app

$cd my-app

$npm start

$yarn eject

fragment节点

防止层级过深
图片说明

ReactDOM.render([JSX],[CONTAINER],[CALLBACK])
一个根节点：<></>
{}绑定动态数据值或者JS表达式（对象和数组的特殊性）
className和style
循环和判断

虚拟DOM的渲染机制

图片说明 

export function createElement(type,props,...childs){
    let obj = {}
    obj.type = type
    obj.props = props || {}
    if(childs.length>0){
        obj.props.children = childs.length === 1 ? childs[0] : childs
    }
    return  obj
}
export function render(jsxOBJ,container,callback) {
    let {type,props} = jsxOBJ
    let element = document.createElement(type)
    for(let key in props){
        if(!props.hasOwnProperty(key)) break
        // className
        if(key==='className'){
            element.className = props['className']
            continue
        }
        // style
        if(key==='style'){
            let sty = props['style']
            for(let attr in sty){
                if(!sty.hasOwnProperty(attr)) break
                element['style'][attr] = sty[attr]
            }
            continue
        }
        // children
        if(key==='children'){
            let children = props['children']
            children = Array.isArray(children)?children:[children]
            children.forEach(item=>{
                if(typeof item === 'string'){
                    element.appendChild(document.createTextNode(item))
                    return 
                }
                // 递归
                render(item,element)
            })
            continue
        }

        element.setAttribute(key,props[key])


    }   
    container.appendChild(element)
    callback&&callback()
}