JSX 初学者指南（以及它与 HTML 的区别）

什么是 JSX

JSX 或 JavaScript XML 是用于编写React组件的 JavaScript 扩展。

例如，下面的代码片段展示了 JSX 的典型样子

const greet = <h1>Hello World</h1>;

因此，JSX 允许我们将 JavaScript 和 HTML 一起编写。然而，与 HTML 和 JavaScript 不同，JSX 无法被浏览器解释，因此需要编译器（Babel 或 Webpack）将其转换为 JavaScript。

为什么要使用 JSX

首先你需要知道的是，JSX 并非必需。即使没有它，你也可以编写 React 代码。

那为什么要用它呢？为什么要把逻辑和标记混在一起？JSX 是语法糖。它的设计目的是让代码更容易阅读和表达。

例如：考虑一个 JSX 表达式

<p color="red" shadowSize={2}>I'm a random sentence</p>

它由 Babel 编译为

React.createElement(
  "p",
  {color: 'red', shadowSize: 2},
  "I'm a random sentence"
)

后面的片段显然不太好看😀

JSX 与 HTML 的区别

1. 自闭合标签

在 HTML 中，可以编写不带闭合标签的自闭合标签，例如<hr />。<hr>但在 JSX 中不允许这样做。所有标签都必须闭合。

此外，所有标签都可以自行关闭，例如<div />

2. 添加 JavaScript 表达式

可以使用花括号 {...} 将 JavaScript 直接添加到 JSX 标记中

{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>

因此不需要<script>使用 HTML 标签

3. HTML 属性改变命名约定

记住，JSX 是用 JavaScript 编写 HTML，因此某些 HTML 属性（例如class和 ，for在 JavaScript 中是关键字）必须分别更改为className和hmtlFor。请注意命名约定中使用了驼峰命名法。

所有JSX 属性都遵循驼峰命名规范。background-color因此backgroundColor

4. 内联 CSS 是一个对象

在 HTML 中，你可以直接在开始标签中添加内联 CSS 样式。但在 JSX 中则不行。这里需要传递一个对象。
例如，请考虑以下 HTML 代码片段

<p style="color:red;font-size:14px">Hello there!</p>

在 JSX 中，可以写成

cont Greet = function() {
  const myStyles = {
    color:"red";
    fontSize:"14px";
    }
  return <p style={myStyles}>Hello there!</p>;
}

或者

return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}

我目前正在学习 React。在从 HTML 转向 JSX 的过程中，我发现了一些每个人都应该了解的关键概念和区别。这只是我的笔记，希望对你有帮助😊

标题图片来源：patterns.dev