Попередній перегляд JSX без створення проєкту React спочатку

HTML досі пропонує один із найпростіших механізмів циклів у роботі в Інтернеті: створюєте файл, зберігаєте його, двічі клацаєте на ньому — і браузер відображає сторінку. UI, створене за допомогою 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