JSX，也称为 JS XML 或 JavaScript eXtension，不是HTML，但它肯定大量使用 HTML。简而言之，JSX 是一种语法糖，可帮助开发人员以更直观和视觉连贯的方式编写 React 代码。

React 的 DNA 中有许多原则。关注点分离和声明式方法是其中的两个。

在继续之前，让我们看看关注点分离和声明性方法是什么意思！

关注点分离或SoC是软件设计的一项原则，它告诉我们将代码分离到不同的组件中，这样每个组件都有一个且只有一个concern（称为责任）需要处理。
声明式方法确保开发人员必须指定他/她想要的how内容，并且编译器会处理该部分。
JSX 是实现这两个 React 核心原则的一步。通过使用 JSX 编写代码，开发人员可以卸下如何在 UI 中渲染代码的部分，同时他们也不关心 JSX 如何转换为可渲染代码的内部机制。开发人员的唯一职责是设计和创建 React 应用程序。剩下的非应用程序或通用任务不应该是他们应该担心的事情。

综上所述，JSX 究竟是如何实现上述原理的呢？为了理解这一点，让我们进一步深入并查看一些代码片段：

纯 JS 方法

以下代码片段显示了一种基于纯 JS 的方法，以便root在我们的 HTML 文档中的元素中添加一个简单的段落。

var rootDiv = document.getElementById("root");
var newParagraph = document.createElement("p");
var textElement = document.createTextNode("This paragraph is created in JS");
newParagra
1
2
3