JSX 简介

  • 1 分钟

React 使用一种名为 JavaScript XML (JSX) 的特殊语法。 借助 JSX，你可将 HTML（或可能会创建的自定义组件）和 JavaScript 集成到一个文件中，甚至可以集成到单个代码行中。 通过使用 JSX，你可以依赖 JavaScript 语法来实现逻辑。 Visual Studio Code 为 JSX 文件提供 IntelliSense 功能，使用 React 时此工具会非常有用。

注意

JSX 依赖于可扩展标记语言 (XML)。 XML 的语法类似于 HTML。 许多情况下，你可能都不会注意到二者之间的差异。 但是，XML 对语法有几点重要的限制：

  • 所有元素都必须放置在一个父元素内。
  • 必须结束所有元素。

生成过程

浏览器本机不支持 JSX。 因此，必须从 JSX 文件生成 JavaScript 和 HTML，才能由浏览器呈现它们。 有几种捆绑程序和其他工具可以执行所需完成的任务。 这些工具包括 Webpack、 和 。 我们将使用 Snowpack，因为它不需要代码，也不需要额外编写脚本。

组件

React 开发基于组件完成。 组件是自包含显示和工作单元。 它们可在应用程序中重复使用。 你可使用它们将应用程序按逻辑分解为更小的区块（或组件）。