什么是JSX

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

例如, 考虑下面这段代码片段说明了 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>

进入全屏模式 退出全屏模式

所以不需要 HTML 使用的<script>标签

3\。 HTML 属性更改命名约定

请记住,JSX 是用 JavaScript 编写 HTML,因此某些 HTML 属性(如class和for)在 JavaScript 中是关键字,必须分别更改为className和hmtlFor。 注意在命名约定中使用 camelCasing。

所有 JSX 属性遵循 camelCase 命名约定。所以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