03-JSX_jsx let div-CSDN博客

本文链接：https://blog.csdn.net/weixin_45969726/article/details/125072525

本文介绍了JSX，它是JavaScript的一个扩展，用于构建React元素。JSX提供了一种类似HTML的语法来描述UI结构，但实际上会被编译成React.createElement函数。浏览器无法直接理解JSX，需要借助Babel将其转换为JavaScript。示例代码展示了如何在React中使用JSX创建组件并渲染到DOM中，强调了声明式编程的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

体验JSX

一、什么是JSX

JSX是JavaScript的一种扩展，JSX可以生成React “元素”,可以更加简洁的构建UI结构

二、 JSX特点

1.本质上，他只是React.createElement(component,props,…children)函数的语法糖，写代码更加方便快捷

2.JSX所描述的代码结构，最终还是会被编译成React.createElement(component,props,…children)的形式

3.因为JSX语法上更接近JavaScript而不是HTML，所以ReactDOM使用camelCase(小驼峰命名)来定义属性的名称，而不使用HTML属性名称的命名约定

三、总结

这种以“标签”的形式构建DOM的形式成为声明式语法，需要什么DOM，只需要声明就行了，创建的事(React.createElement)交给React完成。

四、代码示例

1、头部引用React

<script src="https://unpkg.com/react@18.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.1/umd/react-dom.development.js"></script>

2、HTML代码

<div id="main"></div>

3、JS代码

由于浏览器无法识别JSX代码，也就是说浏览器不认可在script标签中以<></>的形式进行编译，需要借用babel ，即在头部引用以下代码

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

还需要在编译JSX的script标签中设置

<script type="text/babel"></script>

设置完以后编写JSX代码

let div = (
        <div className="container">
          <p>
            段落
            <span> 行标签 </span>
          </p>
          <span></span>
        </div>
      );
      let root = ReactDOM.createRoot(document.getElementById("main"));
      root.render(div);