React开发中,jsx语法通过一系列的转换后成虚拟DOM,然后再挂载到真实的DOM中的全过程讲解

1、react中的jsx语法

• 1.1 这就是简单的jsx语法, 就是再js中写html元素，前提是script标签必须加 type=text/babel, 否则jsx语法会报错
  

2、jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖

const msg1 = <h2>哈哈哈</h2>

• 2.1 在js中上面这段代码等价于下面这段react.createElement()的值

const msg2 = React.createElement("h2", null, "哈哈哈");//js语法

• 2.2 jsx语法在babel中会转成 React.createElement()的函数调用。
  注意：使用了React相关的方法一定先引入react.development.js 和 react-dom.development.js 这两个文件，否则会报错

<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>

3、babel转换

• 3.1 我们先用jsx语法, 开发页面。部分html代码省略，只写核心js代码

<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
//babel.min文件 是将 jsx转成 React.createElement函数调用的