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元素：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React JSX!</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
}

export default App;

在上面的代码中，我们定义了一个名为App的函数组件，使用JSX语法来返回一个包含<div>、<h1>和<p>等HTML元素的UI结构。

2.2{}可以写的数据—表达式

表达式是什么?--------------->表达式就是一个值
常见的表达式情况

1. 字面常量：

在JSX中，我们可以直接在大括号中使用字面常量，比如字符串、数字、布尔值等。例如：

const greeting = <p>Hello, {`World`}!</p>;

在这个例子中，我们在大括号中使用了字面常量字符串World。

2. 变量：

我们可以在JSX中使用变量，将其值动态地插入到UI中。例如：

const name = 'Alice';
const greeting = <p>Hello, {name}!</p>;

这里，我们将变量name的值动态地插入到<p>元素中。

3. 函数-有返回值：

在JSX中，我们可以调用函数并将其返回的值嵌入到UI中。例如：

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'John',
  lastName: 'Doe'
};

const greeting = <p>Hello, {formatName(user)}!</p>;

在这个例子中，我们调用了formatName函数，并将其返回的值动态地插入到<p>元素中。

4. 方法–能获的值：

如果我们有一个对象，并且该对象具有方法，我们也可以在JSX中调用该方法。例如：

const user = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

const greeting = <p>Hello, {user.getFullName()}!</p>;

在这个例子中，我们调用了user对象的getFullName方法，并将其返回的值动态地插入到<p>元素中。

5. 对象 --属性能获得值：

我们还可以在JSX中直接使用对象，并访问对象的属性。例如：

const user = {
  name: 'Alice',
  age: 25
};

const userInfo = <p>Name: {user.name}, Age: {user.age}</p>;

在这个例子中，我们直接在JSX中访问了user对象的name和age属性。
js const styleObj={color:red} const greeting = <p style={styleObj}>Hello!</p>;
在这个例子中，我们直接在JSX中赋值style样式

6. 条件语句–三目运算–需要有返回值(因为表达式就是一个值)

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
  </div>
);

使用三元运算符来实现if’的效果

7. 循环语句-数组遍历----有返回值

const List=[
    {id:1,value:"北京"},
    {id:2,value:"上海"},
    {id:3,value:"新疆"},
    {id:4,value:"青海"}
]
<ul>
    {
        List.map(ele=>{
            return (
                <li key={ele.id}>{ele.value}</li>
            )
        })
    }
</ul>

在上面的代码中，根据变量List的map返回的值来动态显示多个li。

---