JSX и React

Deno запускает JSX в файлах .jsx и .tsx без этапа сборки. На этой странице описано, как настроить JSX: какую UI-библиотеку выбрать, как преобразовать JSX в HTML на сервере и какие параметры управляют трансформацией. Если вы создаёте приложение с помощью фреймворка, обычно он настраивает всё за вас. См. раздел Веб-разработка, посвящённый Fresh, Next.js и другим фреймворкам.

Для преобразования тегов JSX, например <h1>, в значения во время выполнения нужна библиотека. Deno поддерживает React, Preact и Hono. Выбор задаётся параметром jsxImportSource в файле deno.json.

Настройка JSX

Настройте JSX один раз в файле deno.json, используя автоматическую среду выполнения. Это рекомендуемый вариант: вы пишете JSX, а Deno добавляет нужные импорты, поэтому вам не придётся импортировать фабрику JSX вручную.

Для React:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
  "imports": {
    "react": "npm:react@^19",
    "@types/react": "npm:@types/react@^19"
  }
}

@types/react обеспечивает проверку типов и автодополнение JSX в редакторе. После изменения файла imports запустите deno install, чтобы загрузить пакеты и сохранить их в кэше.

Для Preact укажите jsxImportSource как preact. Preact включает собственные типы, поэтому отдельный пакет @types не нужен:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact": "npm:preact@^10"
  }
}

При любой из этих конфигураций компонент — это просто функция, возвращающая JSX:

export function Hello() {
  return <h1>Hello, world!</h1>;
}

Выбор React, Preact или Hono

Все три библиотеки работают в Deno. Выбор зависит от того, что вы создаёте:

• Preact — компактная и быстрая библиотека, совместимая с React. Это отличный вариант для HTML, отрисовываемого на сервере; для максимальной скорости её можно использовать с трансформацией предварительной компиляции. Во фреймворке Fresh, веб-фреймворке Deno, используется Preact.
• Hono включает собственную среду выполнения JSX (hono/jsx), предназначенную для серверного рендеринга и развёртывания на периферии сети. Выберите её, если уже создаёте API или сайт с помощью Hono.
• React подойдёт, если вам нужна экосистема React: библиотеки только для React, серверные компоненты React или существующая кодовая база React. Его серверный рендерер тяжелее, чем у Preact, и не поддерживает трансформацию предварительной компиляции.

Позже можно сменить библиотеку, изменив jsxImportSource и соответствующий импорт. Сам JSX останется прежним.

Преобразование JSX в HTML на сервере

Чтобы отправить HTML с сервера, преобразуйте компоненты в строку и верните её в объекте Response. Для каждой библиотеки используется свой рендерер.

Для Preact используйте preact-render-to-string:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact": "npm:preact@^10",
    "preact-render-to-string": "npm:preact-render-to-string@^6"
  }
}

import { render } from "preact-render-to-string";

function App() {
  return <h1>Hello from Preact</h1>;
}

Deno.serve((_req) => {
  const html = `<!DOCTYPE html>${render(<App />)}`;
  return new Response(html, {
    headers: { "content-type": "text/html; charset=utf-8" },
  });
});

deno run -N server.tsx

Для React используйте react-dom/server:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
  "imports": {
    "react": "npm:react@^19",
    "react-dom": "npm:react-dom@^19",
    "@types/react": "npm:@types/react@^19"
  }
}

import { renderToString } from "react-dom/server";

function App() {
  return <h1>Hello from React</h1>;
}

Deno.serve((_req) => {
  const html = `<!DOCTYPE html>${renderToString(<App />)}`;
  return new Response(html, {
    headers: { "content-type": "text/html; charset=utf-8" },
  });
});

deno run -N -E server.tsx

Ускорение серверного рендеринга

Deno включает трансформацию предварительной компиляции, предназначенную для серверного рендеринга. Она анализирует JSX во время сборки и преобразует статическую разметку в готовые строки HTML, благодаря чему серверу не приходится выполнять большую часть работы по созданию объектов JSX при каждом запросе. Установите jsx в "precompile":

{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact": "npm:preact@^10",
    "preact-render-to-string": "npm:preact-render-to-string@^6"
  }
}

Трансформация предварительной компиляции работает с Preact и Hono. Она не работает с React: jsx-runtime React не экспортирует вспомогательную функцию jsxTemplate, от которой зависит трансформация, поэтому проект React с такой настройкой завершится ошибкой SyntaxError: ... does not provide an export named 'jsxTemplate'. Вместо этого используйте с React среду выполнения "react-jsx".

Если некоторые элементы не следует предварительно компилировать в статические строки, перечислите их имена тегов в параметре jsxPrecompileSkipElements:

{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "preact",
    "jsxPrecompileSkipElements": ["a", "link"]
  },
  "imports": {
    "preact": "npm:preact@^10"
  }
}

Настройка JSX для отдельных файлов с помощью прагм

Если в большей части проекта используется одна конфигурация, но отдельному файлу нужна другая, задайте источник импорта для этого файла с помощью комментария-прагмы, а не изменяйте deno.json. Такой способ часто используют для автономных скриптов без конфигурации проекта. Прагма должна находиться в начале комментариев файла:

/** @jsxImportSource npm:preact */

export function App() {
  return <h1>Hello from a one-off script</h1>;
}

Если библиотека не включает собственные типы, укажите Deno отдельный пакет типов с помощью @jsxImportSourceTypes:

/** @jsxImportSource npm:react@^19 */
/** @jsxImportSourceTypes npm:@types/react@^19 */

export function Hello() {
  return <div>Hello!</div>;
}

То же значение jsxImportSourceTypes можно указать и в качестве параметра компилятора в deno.json для проектов, в которых библиотека JSX не содержит типы.

Справочник по параметрам трансформации

Параметр компилятора jsx определяет, как Deno компилирует JSX. Задайте его в deno.json внутри compilerOptions:

Связанные параметры:

• jsxImportSource: модуль, из которого импортируется JSX (react, preact, hono/jsx). Deno автоматически добавляет /jsx-runtime.
• jsxImportSourceTypes: пакет типов, используемый, если библиотека JSX не включает типы.
• jsxPrecompileSkipElements: имена тегов, которые следует исключить из трансформации предварительной компиляции.

Полный список параметров компилятора TypeScript, поддерживаемых Deno, см. в справочнике по deno.json и разделе Настройка TypeScript.

Что дальше

• Веб-разработка: создавайте приложения с помощью Fresh, Next.js, Astro и других фреймворков, которые настраивают JSX за вас.
• HTTP-сервер: отдавайте HTML, сформированный вашими компонентами.
• Файл конфигурации: все поля deno.json, включая compilerOptions.