3.JSX 语法（上）

通过上节的学习，我们已经初步认识了react的结构及修改了代码，我们再打开页面查看一下当前页面

那我们只是知道了这里可以修改页面，但是对于jsx语法还不是很清晰，那我们详细学习一下，但是肯定有小伙伴不明白明明文件后缀是tsx，我一直在讲jsx，那是因为在本项目中我使用了ts，所以TSX 是 TypeScript + JSX，当然也会带着大家学习一下ts

1.JSX是什么？

• JSX（JavaScript XML）是一种 JavaScript 的语法扩展。

• 它看起来很像 HTML，但实际上是 React.createElement① 的语法糖②。

①：React.createElement 是 React 底层 API，用来创建 React 元素（虚拟 DOM）。

②：一种 更简洁、更易读 的写法，但本质上只是对已有语法的封装或简化。
换句话说，语法糖不会带来新功能，只是让你写代码更舒服。

• 只有在 React 项目（或类似框架）中，JSX 才能被识别，最终会被编译成 JavaScript。

2.React.createElement

例如：

const element = <h1>Hello, world!</h1>;

会被 编译 成：

const element = React.createElement("h1", null, "Hello, world!");

所以，JSX 并不是浏览器能直接识别的东西，而是先转换成 React.createElement 调用，再由 React 渲染。

3.jsx基本规则

 1.必须有根节点
     

  JSX 里必须返回一个单一根节点，可以用 div 或 <>...</> (Fragment) 包裹。

return (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

      

2.属性写法

• 使用 驼峰命名法：如 className 而不是 class，onClick 而不是 onclick。

• 绑定 JavaScript 表达式要用 {}。

3.表达式插值

在 JSX 里可以用 {} 插入变量或表达式。

const name = "天哥";
const element = <h1>Hello, {name}!</h1>;

如果你学过vue此时会发现和react不太一样

例如:

在vue里：

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
const msg = "Hello Vue";
</script>

在react里：

function App() {
  const msg = "Hello React";
  return <h1>{msg}</h1>;
}

 区别：

• Vue 用 {{ }} 进行插值

• React(JSX) 用 { }

由于jsx内容有点多我们下节再讲，这节先讲到这