无需先搭建 React 项目即可预览 JSX

HTML仍然提供了网页开发中最简单的循环方式之一：创建一个文件，保存它，双击该文件，浏览器就会渲染出页面。而React或AI生成的界面往往却是另一种形式：

App.jsx

双击后显示的是源代码而非页面。搜索“如何打开JSX文件？”很快就会引导到React工具教程上。这种差异需要更清晰的说明——当目标并非构建完整应用时，也应提供更简便的预览方式。

熟悉的标记语法并不等同于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

这种工作方式适用于构建实际应用，但若只是想查看某个组件，则显得过于繁琐。

如果只想预览组件怎么办？

它可能是由 AI 生成的，也可能是同事发送的。你或许需要在不同布局之间进行比较，或是判断 React 是否真的是合适的选择。为这类场景搭建整个项目似乎有些大材小用。

AI 使得这种情况愈发常见

当人们期望得到静态 HTML 时，助手们却常常返回 JSX。人们的本能反应是使用完整的技术栈：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.

在编辑时以原始形式很有用，在阅读时则以渲染后的形式有用。重点不在于扩展功能。源代码与预览只是同一作品的两种呈现方式。

为何现在这一点更为重要

人工智能辅助的工作会生成位于传统项目结构之外的文件：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 应用，可用于预览开发者及网页相关格式的文件，包括 JSX、TSX、Vue、HTML、Markdown、JSON、CSS 和 SCSS。它适用于文件已经存在且无需完整开发环境的场景：打开文件查看结果，再决定后续操作。

Preview Kit 在 Microsoft Store 的页面