本页内容
Deno 中 JSX 和 DOM 的概述
Deno 的常见用例之一是处理作为 Web 应用程序一部分的工作负载。由于 Deno 内置了许多浏览器 API，因此能够创建可以在 Deno 和浏览器中运行的同构代码非常强大。Deno 可以处理的一个强大的工作负载是执行 *服务器端渲染* (SSR)，其中应用程序状态在 *服务器端* 用于动态渲染要提供给客户端的 HTML 和 CSS。
当有效使用时，服务器端渲染可以通过将动态内容的繁重计算卸载到服务器进程来显着提高 Web 应用程序的性能，从而允许应用程序开发人员最小化需要发送到浏览器的 JavaScript 和应用程序状态。
Web 应用程序通常由三种关键技术组成
- JavaScript
- HTML
- CSS
以及越来越多的 WebAssembly 可能会在 Web 应用程序中发挥作用。
这些技术结合在一起，允许开发人员使用 Web 平台在浏览器中构建应用程序。虽然 Deno 支持许多 Web 平台 API，但它通常只支持在 *服务器端* 上下文中可用的 Web API，但在客户端/浏览器上下文中，主要的“显示”API 是文档对象模型 (或 DOM)。有一些 API 可通过 JavaScript 访问应用程序逻辑，这些 API 操作 DOM 以提供所需的结果，以及 HTML 和 CSS 用于构建和设置 Web 应用程序的 *显示*。
为了便于在服务器端操作 DOM 以及动态生成 HTML 和 CSS 的能力，有一些关键技术和库可以与 Deno 一起使用来实现这一点，我们将在本章中探讨这些技术和库。
我们将探索相当低级的启用库和技术，而不是用于服务器端网站生成的完整解决方案或框架。
JSX 跳转到标题
JSX 由 Facebook 的 React 团队创建，是一种流行的 DSL（领域特定语言），用于在 JavaScript 中嵌入类似 HTML 的语法。TypeScript 团队还在 TypeScript 中添加了对 JSX 语法的支持。JSX 在开发人员中越来越受欢迎，因为它允许将命令式编程逻辑与看起来很像 HTML 的声明式语法混合在一起。
JSX “组件”可能看起来像这样
export function Greeting({ name }) {
return (
<div>
<h1>Hello {name}!</h1>
</div>
);
}
JSX 的主要挑战在于它既不是 JavaScript 也不是 HTML。它需要在浏览器中使用之前被转译成纯 JavaScript，然后浏览器必须处理该逻辑来操作浏览器中的 DOM。这可能不如让浏览器渲染静态 HTML 效率高。
这就是 Deno 可以发挥作用的地方。Deno 在 .jsx 和 .tsx 模块中都支持 JSX，并结合 JSX 运行时，Deno 可用于动态生成 HTML 以发送到浏览器客户端，而无需将未转译的源文件或 JSX 运行时库发送到浏览器。
阅读 在 Deno 中配置 JSX 部分，了解如何在 Deno 中自定义 JSX 的配置。
文档对象模型 (DOM) 跳转到标题
DOM 是浏览器提供用户界面的主要方式，它公开了一组 API，允许通过 JavaScript 操作它，但也允许直接使用 HTML 和 CSS。
虽然 Deno 具有许多 Web 平台 API，但它不支持与视觉表示相关的 DOM API。尽管如此，还是有一些库提供了许多 API，这些 API 需要将为在 Web 浏览器中运行而设计的代码能够在 Deno 下运行，以便生成可以发送到浏览器“预渲染”的 HTML 和 CSS。我们将在接下来的部分中介绍这些内容
CSS 跳转到标题
层叠样式表 (CSS) 为 DOM 中的 HTML 提供样式。有一些工具可以使在服务器端环境中使用 CSS 更轻松、更强大。