1.React的诞生和JSX的发明

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root">

  </div>
</body>
</html>

<style>
    .red{
        color: red;
    }
    .parent{
        border: 1px solid green;
    }
</style>

版本一

    let number = 0
    render()

    let add = document.querySelector('#add')
    let minus = document.querySelector('#minus')
    
    add.onclick = ()=>{
        number +=1
        render()
    }

    minus.onclick = ()=>{
        number -=1
        render()
    }

    function render(){
        let span = React.createElement('span',{className:'red'},number)  //创建节点
        ReactDOM.render(span,document.querySelector('#root'))  //把span放到#root中
    }

版本二

let number = 0;

    let onClickButton = ()=>{
        number += 1
        render()
    }
    let onClickButton2 = ()=>{
        number -= 1
        render()
    }
    render()
    function render(){
        let span = React.createElement('span',{className:'red'},number)  //创建一个span,类名是red,把number传进去
        let button = React.createElement('button',{onClick:onClickButton},'+')  //创建一个button，绑定一个事件onClickButton，把+传进去
        let button2 = React.createElement('button',{onClick:onClickButton2},'-') //创建一个button，绑定一个事件onClickButton2，把-传进去
        let div = React.createElement('div',{className:'parent'},button,span,button2)  //创建一个div,类名是parent，把button span button 元素传进去
        ReactDOM.render(div,document.querySelector('#root'))  //用react生成上面的div,放到#root中

        // 在修改span时，react会和原来的数据做对比，只更新局部修改，不会整个替换。
    }

版本三进一步优化render函数

let number = 0;
    let h = React.createElement;
    let onClickButton = ()=>{
        number += 1
        render()
    }
    let onClickButton2 = ()=>{
        number -= 1
        render()
    }
    render()
    function render(){
        let div = 
        h('div',{className:'parent'},
            h('button',{onClick:onClickButton},'+'),
            h('span',{className:'red'},number),
            h('button',{onClick:onClickButton2},'-')
        )
        //对比之后发现，上面这种写法很像下面这种。

        // react发明者惊讶的发现，代码和标签没什么区别，所以能不能直接写下面的标签代码，用一个程序翻译成上面的代码
        // 这个程序就叫做JSX翻译器
        // `<div class="parent">
        //     <button onclick="onClickButton">+</button>    
        //     <span>${{number}}</span>
        //     <button onclick="onclickButton2">-</button>
        // </div>`这是jsx代码 这不是写html,是用简便的方法写js（只是用html的形式来写js）

        //最终这种写法被babel采纳了，原生支持翻译 https://babeljs.io/repl
        ReactDOM.render(div,document.querySelector('#root'))  //用react生成上面的div,放到#root中
    }

版本四

    let number = 0;
    let h = React.createElement;

    let onClickButton = ()=>{
        number += 1
        render()
    }
    let onClickButton2 = ()=>{
        number -= 1
        render()
    }
    render()
    
    function render(){
        let div = 
            //使用JSX编译一下
            <div class="parent">
                <button onClick="{onClickButton}">+</button>    
                <span>{number}</span>
                <button onClick="{onClickButton2}">-</button>
            </div>
            //这样写不能运行，不是合法的语法：
            //有两种办法，①用webpack babel翻译一下 ②用jsbin,把js改成jsx

        ReactDOM.render(div,document.querySelector('#root'))



        //优化上面代码
        ReactDOM.render(

            // 这个就是虚拟dom,虚拟dom就是个对象
            <div className="parent">  
                <button onClick="{onClickButton}">+</button>    
                <span className='red'>{number}</span>
                <button onClick="{onClickButton2}">-</button>
            </div>,
            document.querySelector('#root'))  //把上面那段代码 放到#root里面
    }

    // 总结：由于dom Api 太难用了，所以react做到不择手段的不去访问dom,只更新数据，构造出一个虚拟dom
    
    //打印出虚拟dom,知道虚拟dom就是个对象。
    // let span = <span>hi</span>
    // console.log(span)

总结：

JSX到底是什么：jsx就是用html的形式来写js,一种js的拓展
虚拟dom是什么：非真实的dom,一般用对象来表示。虚拟dom就是表示dom节点的对象。

预览在线代码

1.React的诞生和JSX的发明

版本一

版本二

版本三 进一步优化render函数

版本四

总结：

推荐阅读更多精彩内容

版本三进一步优化render函数