JSX Runner

一个专门用于内容创作和预览的轻量级 React 应用平台

在线演示 · 文档 · 贡献指南 · 更新日志

---

✨ 特性

• 🚀 动态页面加载 - 通过 URL 参数动态加载不同的 React 组件页面
• 📄 自动发现页面 - 自动扫描 pages 目录，无需手动配置页面列表
• ⚡ 代码分割 - 使用动态 import，按需加载，优化性能
• 🔥 热更新 - Vite 提供快速的 HMR 开发体验
• 🎨 零配置 - 添加新页面只需创建文件，无需修改代码
• 📱 响应式设计 - 适配桌面和移动设备

📸 截图

首页 - 页面导航

演示页面

文章规划

🚀 快速开始

安装依赖

cd jsx-runner
npm install

启动开发服务器

npm run dev

服务器将在 http://localhost:3000 启动并自动打开浏览器。

访问不同页面

通过 URL 参数 page 来访问不同的页面：

• 首页: http://localhost:3000/ 或 http://localhost:3000/?page=index
• 演示页面: http://localhost:3000/?page=demo_page
• 文章规划: http://localhost:3000/?page=article_plan
• 技术债的真相: http://localhost:3000/?page=article2_full
• 后端工程师的杠杆: http://localhost:3000/?page=article3_full

首页会自动显示所有可用页面，点击即可访问。

📂 项目结构

jsx-runner/
├── .github/                 # GitHub Actions 工作流
│   └── workflows/
│       ├── ci.yml          # 持续集成
│       └── cd.yml          # 持续部署
├── src/
│   ├── pages/              # 页面组件目录
│   │   ├── index.jsx       # 首页列表（自动加载其他页面）
│   │   ├── demo_page.jsx   # 演示页面
│   │   ├── article_plan.jsx # 文章规划
│   │   ├── article2_full.jsx # 技术债的真相
│   │   └── article3_full.jsx # 后端工程师的杠杆
│   └── mount.jsx           # 主入口，动态加载机制
├── .gitignore             # Git 忽略规则
├── .eslintrc.json         # ESLint 配置
├── LICENSE                # MIT 许可证
├── CONTRIBUTING.md        # 贡献指南
├── CHANGELOG.md          # 变更日志
├── README.md              # 项目说明文档
├── index.html            # 通用宿主页面
├── vite.config.js        # Vite 配置文件
└── package.json         # 项目依赖配置

🔧 如何添加新页面

JSX Runner 采用自动发现机制，添加新页面非常简单：

1. 创建页面文件

在 src/pages/ 目录下创建新的 JSX 文件，例如 my-page.jsx

import React from 'react'

// 可选：自定义页面标题（如果未定义，会自动从文件名生成）
export const title = '我的新页面'

export default function MyPage () {
  return (
    <div style={{ minHeight: '100vh', padding: '40px' }}>
      <h1>我的新页面</h1>
      <p>页面内容...</p>
    </div>
  )
}

2. 访问新页面

就是这么简单！ 无需任何配置，首页会自动显示新页面。

访问 http://localhost:3000/?page=my-page 即可查看。

工作原理

• index.jsx 使用 Vite 的 import.meta.glob 自动扫描 pages 目录
• 排除 index.jsx 本身
• 从文件名提取页面名称
• 优先使用 export const title 定义的标题，否则自动生成（如 my-page → My Page）

提示

• 文件名使用小写字母、数字和下划线，如 article_1.jsx
• 首页会自动刷新并显示新页面
• 支持 .jsx 扩展名（Vite 会处理）

📦 构建与部署

构建生产版本

npm run build

构建产物将输出到 dist/ 目录。

本地预览生产版本

npm run preview

代码检查

npm run lint          # 检查代码风格
npm run lint:fix      # 自动修复代码风格问题

🛠 技术栈

• React 18.2.0 - UI 框架
• Vite 4.4.5 - 构建工具和开发服务器
• lucide-react 0.263.1 - 图标库
• ESLint Standard - 代码规范

🎨 设计风格

• 深色主题 - 主色调 #0f1117，适合内容阅读
• 渐变强调 - 线性渐变 #6366f1 → #10b981
• 卡片式布局 - 圆角 12-16px，清晰的视觉层次
• 响应式设计 - 适配桌面和移动设备

📖 使用场景

JSX Runner 特别适合以下场景：

• 内容创作者 - 快速预览和迭代文章内容
• 技术博主 - 管理多篇文章，查看推广文案
• 产品展示 - 创建轻量级的产品展示页面
• 原型开发 - 快速搭建和测试 React 组件
• 在线文档 - 创建简洁的文档展示页面

🤝 贡献

我们欢迎所有形式的贡献！请查看 贡献指南 了解详情。

📝 开发路线图

• 支持亮色/暗色主题切换
• 添加页面编辑器功能
• 支持导出页面为静态 HTML
• 添加页面搜索功能
• 支持自定义主题配置
• 添加页面模板系统

📄 许可证

本项目采用 MIT 许可证 开源。

🙏 致谢

感谢所有为本项目做出贡献的开发者。

📧 联系方式

如果你有任何问题或建议，欢迎：

• 提交 Issue
• 发送邮件：[jingyu525@gmail.com]
• 扫码关注公众号获取更多内容

---