JSX(JavaScript XML)是 React 的核心语法扩展,允许开发者使用类似 HTML 的写法来描述用户界面。它本质上是 JavaScript 的语法糖,最终会被编译为 React.createElement() 调用。

JSX 的优势 ✅

  • 直观性:通过标签语法更直观地描述 UI 结构
  • 可读性:与 HTML 高度相似,降低学习成本
  • 动态性:支持 JavaScript 表达式嵌入(如 {name}
  • 组件化:配合 React 组件实现模块化开发

基本语法示例 📌

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

该代码等价于 React.createElement('h1', null, 'Hello, world!')

JSX 与 HTML 的区别 ⚖️

特性 JSX HTML
属性 使用驼峰命名法(如 className 使用短横线命名法(如 class
表达式 支持嵌入 JavaScript 表达式 不支持直接嵌入表达式
标签闭合 自闭合标签需用 /(如 <img /> 无需自闭合标签

使用注意事项 ⚠️

  1. JSX 默认是严格模式,需手动开启 strictMode: true
  2. 避免在 JSX 中直接使用 eval()new Function()
  3. 通过 babelwebpack 等工具进行转译

了解更多 React 基础知识 →
查看 JSX API 文档 →

JSX_基础语法
React_组件化