Vorabansicht von JSX ohne vorheriges Erstellen eines React-Projekts mit Scaffold

HTML bietet nach wie vor eine der einfachsten Schleifen für die Webentwicklung: Man erstellt eine Datei, speichert sie, klickt doppelt darauf – und der Browser zeichnet eine Seite. UIs, die mit React oder KI erstellt werden, erscheinen hingegen meist folgendermaßen:

App.jsx

Durch Doppelklick wird die Quellcode-Datei angezeigt, nicht eine fertige Seite. Eine Suche nach „Wie öffne ich eine JSX-Datei?“ führt schnell zu einem Tutorial zur React-Entwicklungsumgebung. Dieser Unterschied erfordert eine klarere Erklärung – sowie einen einfacheren Vorschauweg, wenn kein vollständiges Programm das Ziel ist.

Bekannte Markup-Sprachen machen JSX nicht zu HTML

Auf den ersten Blick kann JSX HTML ähneln:

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

Bekannte Tags machen die Datei noch lange nicht zu einer HTML-Datei mit anderer Endung. JSX ist eine in JavaScript-Anwendungscode eingebettete Syntax, meist in Verbindung mit React, und ermöglicht die Kombination von Logik und Markup:

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

Ausdrücke, Props und Komponenten bedeuten, dass der Browser eine Umwandlung sowie einen Laufzeit-Ablauf benötigt. Umbenennen in:

App.jsx

in:

App.html

Man erfindet diesen Pipeline nicht selbst.

Wie soll man normalerweise JSX sehen?

Der übliche Weg besteht darin, das Komponente innerhalb einer React-App einzubinden. Eine gängige Abfolge sieht so aus:

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

Dieser Arbeitsablauf eignet sich, wenn man eine echte Anwendung entwickelt. Er ist jedoch übertrieben, wenn man lediglich eine Komponente betrachten möchte.

Was ist, wenn man die Komponente nur vorab ansehen möchte?

Die KI könnte sie generiert haben. Ein Teamkollege könnte sie geschickt haben. Man möchte vielleicht Layouts vergleichen oder entscheiden, ob React überhaupt die richtige Wahl ist. Für solche Fälle ein ganzes Projekt aufzubauen, erscheint unverhältnismäßig.

Durch KI ist diese Situation viel häufiger geworden

Assistenten liefern häufig JSX, obwohl man statisches HTML erwartet hat. Die instinktive Reaktion ist die Verwendung der gesamten Stack-Lösung: React, Node, Abhängigkeiten, ein Entwicklungsserver sowie verschiedene Tools – selbst dann, wenn die einzige Frage ist, ob das Benutzeroberfläche richtig aussieht. Diese Unzulänglichkeit führte zu einem speziellen Vorschau-Tool namens Preview Kit.

Der Aufstieg des „temporären Codes“

Die schnelle Erstellung ermöglicht mehr vorübergehende Experimente:

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

Möglicherweise wird nur eine Variante veröffentlicht; die anderen dienten als Testversionen. Wenn der Code günstig zu erstellen ist, sollte auch sein Überprüfen und Wegwerfen kostengünstig sein.

Vorschauen ist nicht dasselbe wie das Ausführen einer Produktionsanwendung

Das Ausführen einer Anwendung kann Routing, Zustandsverwaltung, APIs, Authentifizierung, Datenbanken, Abhängigkeitsgraphen, Optimierungen beim Kompilieren sowie Tests beinhalten. Beim Anschauen eines Prototyps wird oft nur gefragt: Wie sieht diese Benutzeroberfläche aus? Das Durchführen beider Aufgaben über dieselbe Projektkonfiguration verursacht Reibungsverluste, die keiner der Seiten benötigt.

Wo eine spezielle Vorschauanwendung passt

Preview Kit ist eine Windows-Anwendung, die für den Vorschau-Schritt konzipiert ist: Man hat eine Datei, öffnet sie und sieht die Darstellung. Unterstützte Formate umfassen:

JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS

sowie verwandte Typen. Sie ersetzt weder VS Code, React, Vue noch einen ordentlichen Entwicklungsserver. Sie deckt den Zeitpunkt vor ab, an dem diese Tools notwendig werden.

Betrachten Sie einen TSX-Komponenten

Ein Assistent könnte Folgendes ausgeben:

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

gespeichert als:

UserCard.tsx

Die Bewertung der Karte erfordert keine vollständige Anmeldung. Ein Vorschau-Modus verhindert standardmäßig, dass kleine Experimente zu Projekten werden.

Das gleiche Prinzip gilt für Vue

Möglicherweise erhalten Sie:

ProductCard.vue

einen Template wie dieses:

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

Die Quellcode-Verfügbarkeit zum Bearbeiten unterscheidet sich von der Anzeige des renderierten Komponenten. Beide Ansichten sind wichtig; sie sollten nicht denselben Aufwand bei der Einrichtung erfordern.

Markdown verfolgt dasselbe Konzept

Ein Überschriftstext wie dieser:

# My Documentation

oder Fließtext wie folgt:

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

sind beim Bearbeiten in Rohform nützlich und bei der Lektüre in renderter Form nützlich. Die Botschaft betrifft keine Erweiterungen. Quelle und Vorschau sind zwei Ansichten desselben Artefakts.

Warum das jetzt noch wichtiger ist

Durch künstliche Intelligenz unterstützte Arbeit erzeugt Dateien außerhalb klassischer Projektstrukturen: UI-Mockups, React- oder Vue-Komponenten, SVGs, Markdown-Zeitnotizen sowie CSS-Experimente. Der erste Schritt ist oft eine Überprüfung und nicht die Bereitstellung. Schnelle Vorschauvorgänge schließen diese Lücke.

Ein besseres Experimentiermodell

Anstatt:

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

besser:

Generate
↓
Preview
↓
Evaluate
↓
Improve

und erst danach:

Build the actual project

Bleiben Experimente und Produktionsprozesse getrennt, was dem tatsächlichen Erlebnis bei generativen Arbeitsabläufen entspricht.

Nicht jede Datei benötigt ein Projekt

Eine Datei bedeutet nicht immer „ein Repository erstellen“. Manchmal bedeutet es nur „einen Blick werfen“. Designer senden SVGs; Modelle erzeugen JSX; Teammitglieder teilen Markdown-Dateien; Konfigurationen kommen als JSON an. Verständnis geht vor Bearbeitung oder Veröffentlichung.

Die Lücke, die das Tool motiviert hat

Das Produkt entstand aus einem kleinen Ärgernis: Eine generierte JSX-Datei, die schwieriger zu vorab ansehen war als erwartet. Die Erstellung wurde einfacher – die Vorschau hingegen nicht. Das Tool existiert, um diesen fehlenden Schritt auszugleichen.

Verkürzung des Weges von Datei bis zur Darstellung

Ziel ist es, die Distanz zwischen einer Datei und ihrer Vorschau zu verringern – angefangen bei „Lass mich mal sehen, was das ist“ statt „Wie konfiguriere ich eine Toolkette?“ Das hilft bei:

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

und anderen unterstützten Formaten.

Das größere Bild

Es geht hier nicht nur um JSX. Wenn Code günstiger zu generieren ist, nehmen die Experimente zu. Wenn die Experimente zunehmen, gewinnt eine schnelle Überprüfung an Wert. Tools, die unnötige Einrichtungen beseitigen, verdienen ihren Platz.

Man muss nicht immer erst entwickeln

Mannchmal ist die richtige Reihenfolge nicht Build → Test → Entscheidung. Manchmal ist es Generieren → Vorschau → Entscheidung → Build. Dieser einfachere Ablauf eignet sich, wenn man auf eine unerwartete .jsx-Datei stößt und das Design vor dem Einfügen in eine React-Anwendung, eine Node-Toolkette sowie einem langen Installationsprotokoll sehen möchte.

Preview Kit

Preview Kit ist eine Windows-App zum Anzeigen von Entwickler- und Web-formaten wie JSX, TSX, Vue, HTML, Markdown, JSON, CSS und SCSS. Sie kommt dann zum Einsatz, wenn die Datei bereits vorhanden ist und eine vollständige Entwicklungsumgebung überflüssig wäre: Man öffnet die Datei, sieht das Ergebnis und entscheidet anschließend, was weiter geschehen soll.

Microsoft Store-Eintrag für Preview Kit