前端库-React框架：「01] 创建一个简单的 JSX 元素

Posted 2021-08-05 路条编程

React，由 Facebook 创建，是一个用于构建用户界面的开源 javascript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 html 与 JavaScript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。

创建一个简单的 JSX 元素

React 是由 Facebook 创建和维护的开源视图库。它是渲染当代 Web 应用程序用户界面（UI）的绝佳工具。

React 使用名为 JSX 的 JavaScript 语法扩展，允许你直接在 JavaScript 中编写 HTML。这有几个好处。它允许你在 HTML 中使用 JavaScript 的完整程序功能，并有助于保持代码的可读性。在大多数情况下，JSX 类似于你已经学过的 HTML，但是在这些挑战中将会涉及一些关键差异。

例如，因为 JSX 是 JavaScript 的语法扩展，所以你实际上可以直接在 JSX 中编写 JavaScript。要做到这一点，你只需在花括号中包含你希望被视为 JavaScript 的代码： {“这被视为 JavaScript 代码”}。请牢记这个写法，你将会在接下来的挑战中使用。

但是，由于浏览器不能解析 JSX，因此必须将 JSX 代码编译为 JavaScript。在这个过程中，转换器 Babel 是一个很受欢迎的工具。后续挑战已经在后台引入了 Babel，你可以直接写 JSX 代码。如果你的代码不符合 JSX 语法，那么挑战中的第一个测试就不会通过。

值得注意的是，这些练习在底层调用 ReactDOM.render(JSX, document.getElementById('root'))。这个函数调用是将你的 JSX 置于 React 自己的轻量级 DOM 中。然后，React 使用自己的 DOM 快照来优化更新实际 DOM 的特定部分。

说明：当前代码使用 JSX 将 div元素赋值给常量 JSX。将 div替换为 h1元素，并在其中添加文本 Hello JSX!。

完整代码如下所示：

const JSX = <h1>Hello JSX!</h1>;

运行结果如下所示：