react零基础学习——JSX到底是什么？在新手学习react之前，想必我们对javaScript应该也有一定的了解，但

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

在新手学习react之前，想必我们对javaScript应该也有一定的了解，但是在react官网也好，其他的学习资源的文章、博客等等，涉及到react都会说到JSX这个语法，而很少提到JS，那么问题来了，JSX到底是什么呢？它和JS又有什么区别呢？今天就聊一下这个话题！

使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML （代码如下）

/* 
    这就是一段简单的jsx语法，可以看到我们给一个标签起类名，jsx用的是className，
    如果是HTML的话直接写class就可以了 
*/
<div className="container">
    <h3>Hello React</h3>
</div>

但它确实是 JavaScript ，我们在学习react之前一定要明确这样的概念，毕竟我们要作为程序员一定要显得专业，哈哈哈哈。在 React 代码执行之前，Babel (一些经验不是太足的同学可能对babel这个概念不是那么熟悉，或许只是在工作中偶然见到过，但并不清楚它具体是什么，简单来说，babel是一个工具链，它会帮我们把ES6+的语法编写的代码转换为浏览器能够兼容的 JavaScript代码) 会对将 JSX 编译为 React API（React API如下）

// 上面代码经过babel转换后的js代码 
React.createElement( "div", { className: "container" }, React.createElement("h3", null, "Hello React"), ); 
// 这里React.createElement（）这个放啊有三个参数： 
// 第一个参数是标签名（比如‘div‘）； 
// 第二个参数是属性名（比如‘className‘）
// 第三个参数就是标签里的文本内容或者子标签元素

总结：

jsx被转换为react.createElement() 方法的调用，方法在调用后会返回virtual dom（虚拟dom，其实就是用来描述真实dom元素的javaScript对象）对象，然后react对象再将virtual dom对象转换为真实dom对象，再将真实dom对象显示在页面当中。