React的JSX语法学习和常见的插值{}内容情况

React JSX语法的博客文章。以下是一篇简短的文章，详细讲解React JSX语法，包括代码示例和注释：

---

1.React JSX概念

因为原生的javascript操作dom很是繁琐,几乎都需要先获取原始dom,在修改数据,在同步给innertext或是节点插入,删除等,如果节点少的话还好,但是如果需要多很多的话,那么节点就太多了不太方便
所以后面出来一个Jquery的JS第三方库,让我们不用为了获取一个标签写那么长的代码.
但是依然不满足现状,后来出现了Angular,react,vue等框架,把原生的js操作DOM更加简化了
JSX就是react的一种便于DOM操作的拓展语法
JSX===javascript+XML
说白了就是 在javascript的代码中插入了HTML标签

原生js修改div的内容

<div id="myDiv">原始内容</div>  
  
<script>  
// JavaScript代码，如上所示  
var myDiv = document.getElementById("myDiv");  
myDiv.innerText = "加油 不放弃";  
// 或者使用 myDiv.textContent = "加油 不放弃";  
</script>  

jsx方式

const msg="你好"//直接把  你好变为  "加油 不放弃"; 
//不用dom获取 这些都是框架做好的  能自动编译
const App = () => {
   
  return (
    <div>
      <h1>{
   msg}</h1>
    </div>
  );
}

2. React JSX使用

jsx常常需要结合react的项目使用
在React中，JSX（JavaScript XML）是一种允许在JavaScript代码中编写类似HTML的语法的扩展。JSX使得在React组件中编写UI变得更加直观和易读。让我们来深入了解React JSX语法。

2.1 渲染元素–直接写标签就可以了

首先，让我们创建一个简单的React函数组件，并使用JSX语法来渲染UI元素：