react 中 JSX 语法的转化过程

Posted 2022-12-13 冰雪奇缘lb

JSX 语法的转化过程

• JSX 仅仅是 createElement() 方法的语法糖（简化语法)
• JSX 语法被 @babel/preset-react插件 编译为 createElement() 方法
• React元素∶是一个对象，用来描述你希望在屏幕上看到的内容
  

import React from "react";
import ReactDOM from "react-dom";

/*
    JSX 语法转化过程
*/

// const element = <h1 className="greeting">Hello JSX!</h1>

const element = React.createElement(
    "h1",
    
        className: 'greeting'
    ,
    'Hello JSX!'
)

console.log(element);

// 渲染组件
ReactDOM.render(element, document.getElementById("root"))