Предварительный просмотр JSX без создания проекта React с фреймворком

HTML по-прежнему предлагает один из самых простых способов создания циклов в веб-разработке: создаётся файл, он сохраняется, на него дважды кликают — и браузер отображает страницу. В то время как интерфейсы, созданные с помощью React или ИИ, обычно появляются в следующем виде:

App.jsx

При двойном клике открывается исходный код, а не страница. Поиск фразы «как открыть файл JSX?» быстро превращается в обучающий материал по инструментам React. Такое несоответствие требует более чёткого объяснения, а также удобного способа превью, когда целью не является создание полноценного приложения.

Знакомый маркиуп не превращает JSX в HTML

На первый взгляд JSX может напоминать HTML:

<div>
  <h1>Hello World</h1>
  <p>Welcome to my application.</p>
</div>

Наличие знакомых тегов не делает файлом HTML с другим расширением. JSX — это синтаксис, встроенный в код JavaScript-приложений, чаще всего с использованием React, и он позволяет сочетать логику с маркиупом:

function Welcome({ name }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
    </div>
  );
}

Выражения, атрибуты и компоненты означают, что браузеру требуется процесс преобразования и выполнение кода во время работы. Переименовав:

App.jsx

в:

App.html

Этот пайплайн не изобретается заново.

Как же обычно следует просматривать JSX?

Стандартный способ — разместить компонент внутри приложения React. Типичная последовательность действий выглядит так:

Install Node.js
       ↓
Create React project
       ↓
Install dependencies
       ↓
Add JSX component
       ↓
Run development server
       ↓
Open browser

Такой подход уместен при разработке реального приложения. Однако он слишком громоздок, если нужно лишь взглянуть на компонент.

Что делать, если нужно только предварительно посмотреть компонент?

Его могла сгенерировать ИИ. Его мог отправить коллега. Возможно, вы сравниваете интерфейсы или решаете, действительно ли React — правильный выбор. Создание полного проекта для таких случаев кажется чрезмерным.

ИИ сделал такую ситуацию гораздо более распространенной

Ассистенты часто возвращают JSX там, где ожидают статический HTML. Инстинктивной реакцией является использование полного стека: React, Node, зависимости, сервера разработки и различных инструментов — даже тогда, когда единственный вопрос заключается в том, правильно ли выглядит интерфейс. Именно такие трудности побудили к созданию специализированного инструмента превью под названием Preview Kit.

Рост популярности «временного кода»

Высокая скорость генерации способствует созданию ещё большего количества временных экспериментов:

dashboard-a.jsx
dashboard-b.jsx
dashboard-c.jsx
dashboard-d.jsx

Возможно, выпускается только один вариант; остальные служат для тестирования. Когда создание кода стоит недорого, его проверка и утилизация также должны быть дешевыми.

Превью — это не то же самое, что запуск приложения в производственной среде

Запуск приложения может включать маршрутизацию, управление состоянием, использование API, механизмы аутентификации, базы данных, диаграммы зависимостей, оптимизацию процесса сборки и тестирование. При просмотре прототипа обычно задается лишь один вопрос: как выглядит этот интерфейс? Попытка выполнять оба типа задач в рамках одной и той же настройки проекта создает лишние сложности, которые ни одной из сторон не нужны.

Где подходит специализированное приложение для просмотра

Preview Kit — это приложение для Windows, предназначенное для этапа просмотра: у вас есть файл, вы его открываете и видите результат отрисовки. Поддерживаемые форматы включают:

JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS

и связанные с ними типы. Оно не заменяет VS Code, React, Vue или полноценный сервер разработки. Оно покрывает период до того, как становится оправданным использование этих инструментов.

Рассмотрим компонент TSX

Помощник может выдать:

function UserCard() {
  return (
    <div className="card">
      <h2>Alex</h2>
      <p>Frontend Developer</p>
      <button>View Profile</button>
    </div>
  );
}

сохранено как:

UserCard.tsx

Для оценки карты не требуется заполнять полную заявку. Режим предварительного просмотра по умолчанию не позволяет небольшим экспериментам превращаться в полноценные проекты.

То же самое касается Vue

Вы можете получить:

ProductCard.vue

с таким шаблоном:

<template>
  <div class="product-card">
    <h2>Product Name</h2>
    <button>Buy Now</button>
  </div>
</template>

Возможность редактирования исходного кода отличается от возможности просмотра отрендеренной компоненты. Оба вида просмотра важны; они не должны требовать одинаковых усилий на настройку.

У Markdown та же концепция

Заголовок вроде:

# My Documentation

или текст тела вроде:

This is **important**.## Installation1. Download the application.
2. Open the file.
3. Start working.

полезны в необработанном виде во время редактирования и полезны в отрендеренном виде при чтении. Суть не в расширениях. Исходный код и предварительный просмотр — это два вида отображения одного объекта.

Почему это сейчас имеет большее значение

Работа с помощью ИИ генерирует файлы вне традиционных структур проектов: макеты интерфейса, компоненты React или Vue, SVG-изображения, заметки в формате Markdown, эксперименты с CSS. Чаще всего первой необходимостью является просмотр файлов, а не их развертывание. Быстрый превью помогает преодолеть эту проблему.

Лучший цикл экспериментов

Вместо того чтобы:

Generate code
↓
Create project
↓
Install dependencies
↓
Configure environment
↓
Run project
↓
See result

лучше использовать:

Generate
↓
Preview
↓
Evaluate
↓
Improve

и только затем:

Build the actual project

Экспериментирование и превращение результатов в готовый продукт остаются разными процессами, что соответствует реальному функционированию генеративных рабочих процессов.

Не каждый файл требует отдельного проекта

Наличие файла не всегда означает необходимость создания репозитория. Иногда это просто означает необходимость его просмотра. Дизайнеры отправляют SVG-файлы; модели генерируют код JSX; коллеги делятся заметками в Markdown; конфигурации поступают в формате JSON. Понимание содержимого файла приходит раньше, чем начинается его редактирование или развертывание.

Проблема, которая побудила создать инструмент

Всё началось с небольшой проблемы: генерируемый файл JSX оказался сложнее для просмотра, чем ожидалось. Процесс генерации стал проще, но функция просмотра не поспевала за этим развитием. Этот инструмент создан именно для устранения этого пробела.

Сокращение пути от файла до отрисовки

Цель — уменьшить расстояние между файлом и его превью, начиная с вопроса «Давайте посмотрим, что это» вместо «Как настроить инструментальную среду?» Это помогает в следующем:

.jsx
.tsx
.vue
.html
.md
.json
.css
.scss

и других поддерживаемых форматах.

Более широкая перспектива

Речь идёт не только о JSX. Когда генерация кода становится проще, умножается количество экспериментов. Когда увеличивается количество экспериментов, становится важнее быстрая проверка результатов. Инструменты, устраняющие ненужную настройку, заслуживают своего места.

Не всегда нужно сначала создавать проект

Иногда правильный порядок действий — не «создать → протестировать → принять решение». Иногда он — «сгенерировать → посмотреть превью → принять решение → создать». Такой более легкий цикл подходит, когда поступает неожиданный файл с расширением .jsx, и хочется увидеть его визуальный вид перед тем, как начинать работу с React-приложением, инструментарием Node и длинным логом установки.

Preview Kit

Preview Kit — это приложение для Windows, предназначенное для просмотра форматов, связанных с разработкой и вебом, включая JSX, TSX, Vue, HTML, Markdown, JSON, CSS и SCSS. Оно полезно в тех случаях, когда файл уже существует, а полная настройка разработки была бы избыточной: достаточно открыть файл, увидеть результат, а затем решить, что делать дальше.

Описание Preview Kit в Microsoft Store