Падзірніца 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.

є корыстным у неадаптаванам выглядзе пад час рэдагавання, а таксама корыстным у перакладзе пад час чытання. Суть не ў расширэннях. Адначасовае адображэнне ісходнага коду і прадзірка — гэта две формы адображэння адной роботы.

Чаму гэта мае большое значэнне сёньня

Работа з дапамогайом AI стварае файлы парадзельна класычным дрэваў проектаў: макеты UI, компаненты 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, якая дапамагае пераглядаць форматы, relacionаваныя з разработкай та вебам, уключаючы JSX, TSX, Vue, HTML, Markdown, JSON, CSS чы SCSS. Яна падходзіць тады, калі файл вялікі ўжо існуе, а повна наладка для разработкі будзе занадта: проста ачыніце файл, побачыце рэзультат, а потым выберыце, што рабіць далей.

Старонка Preview Kit у Microsoft Store