【React】深入理解 JSX语法

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础
​💫个人格言: "如无必要，勿增实体"

深入理解 JSX语法

1. JSX 简介

JSX (JavaScript XML) 是 React 框架中的一种特殊语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的代码。JSX 为我们提供了一种直观的方式来描述用户界面的结构，同时保持了 JavaScript 的全部功能。

2. JSX 的基本语法

2.1 基本结构

JSX 的基本写法如下：

const element = (
  <div className="greeting">
    <h1>你好，世界！</h1>
  </div>
);

2.2 与普通 JavaScript 的区别

传统 JavaScript 中，如果要创建相同的结构，需要这样写：

const element = React.createElement(
  'div',
  {
   className: 'greeting'},
  React.createElement('h1', null, '你好，世界！')
);

3. JSX 的特性和规则