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