← Gimbo's Universe/Ideas/React vs OpenAI Sites
零基础图解 · AI 学习记录 #09 · 2026.07

同一个网球产品,两种造法。

一个版本用 React:从门牌、门锁到水电都自己决定。另一个用 OpenAI Sites:平台把入口、身份和基础设施先接好。它们都能造出真正的 web app,差别不在“会不会写代码”,而在:哪些麻烦由你拥有,哪些麻烦交给平台。

以下比较基于 2026-07-17 的两套真实 Tennis Buddy 代码。项目当前没做某功能,不等于平台永远做不到。

不是

高级代码 vs 低级代码

而是

自主控制 vs 平台代管

最终问题

这阶段最值得拥有哪种麻烦?

独立店铺,还是配套商场?

React 和 Sites 都不是“点一下就自动有产品”。两边都要设计页面、业务规则和用户体验。差别是,React 给你一块更自由的地;Sites 先把一部分公共设施接好。

React · 独立店铺

每扇门都能改,
每根管也归你修。

品牌、网址、登录服务、数据库、部署方式、第三方工具都可以自由组合。自由度高的另一面,是出了问题要知道去哪一层找。

最高控制自由选型自己维护

从按钮往下,
还有六层世界。

用户只看见“Join Match”按钮。产品背后还要知道你是谁、比赛有没有满、数据写到哪里、网站如何上线、坏了谁来修。把这些层摊开,差别才真正可见。

React 路线

更多自己拥有
体验 / UI页面、导航、交互、品牌你负责
业务规则邀请、Join、取消、权限你负责
身份Supabase magic link / 邮件你选择
数据Supabase 表、策略、迁移你设计
部署Vercel、域名、环境变量你接线
生态任意第三方 API 与服务你组合

Sites 路线

平台多扛几层
体验 / UI页面、导航、交互、品牌你负责
业务规则邀请、Join、取消、权限你负责
身份ChatGPT 登录上下文平台承接
数据D1 binding 与托管环境平台接入
部署Sites 发布与托管平台承接
生态在平台允许的接口里扩展共同边界

现在的项目
还是看平台机制?

下面的开关很重要:第一种镜头回答“我手上这两个版本现在做到哪里”;第二种回答“这类方式通常把责任放在哪里”。少一个功能,可能只是这版主动没做。

React · 当前实现

更宽的产品面

  • 5 个主导航:Home、Players、Matches、Community、Profile
  • 自定义域名与 Supabase magic-link 登录
  • 找球友、建局、邀请、接受/拒绝、比赛聊天、比分页面
  • Community 仍含占位内容;通知和设置尚未完成
  • 构建与 lint 通过,但没有自动测试脚本

同一个动作,
不同的路。

选择 Login、Join Match 或 Deploy。每条路都能到终点,但中间经过的服务和责任归属不一样。

用户登录:谁替产品确认“你是谁”?

React 版自己接 Supabase 与邮件;Sites 版从 ChatGPT 的身份上下文开始。

React

self-assembled

不是谁赢,
范围不同。

这张表只描述当前两套代码,不宣称任何平台上限。React 版做得更宽;Sites 版主动把注意力放在“能不能约成一场球”。

能力React 当前项目Sites 当前项目读法
登录与资料Supabase magic linkChatGPT 身份两边都是真实身份,只是入口不同
找球友 / 球场真实数据真实数据核心发现路径两边都有
Host / Invite / Join完整完整两边都能走通约球闭环
比赛内聊天轮询更新真实消息实现细节不同,用户结果相似
比分记录已有页面未纳入范围这是项目范围差异,不是平台结论
Community仍有 mock未纳入范围“有页面”不等于“已完成”
自动测试无 test script2 条结构测试测试是团队纪律,不由框架自动保证
品牌 / 域名自主域名平台站点地址长期品牌控制面不同

● 绿色 = 已实现 ● 黄色 = 部分 / 占位 ● 红色 = 当前项目未做。颜色不是质量评分。

选择的不是工具,
麻烦的形状。

条越长,代表这条路线在该维度更占优势。它不是实验室基准,而是结合这两个真实项目后的相对判断。

核心交换

控制权

启动速度

React 把更多决定留给你;Sites 把更多基础决定先替你做。早期速度很值钱,长期迁移自由也很值钱,只是它们通常不在同一时间最重要。

你拥有的控制 ↑
你必须维护的接口也 ↑
第一版速度
品牌控制
生态自由
少接基础设施
迁移主动权
零基础心智负担

没有标准答案,
只有当前权重。

拖动三个滑杆。它不是技术选型机器,而是把你真正看重的东西逼到台面上。

8 / 10

越高,越应该少做登录、部署和基础设施接线。

可以慢慢造这周就要给人用
7 / 10

越高,越需要自定义域名、服务组合与迁移主动权。

先验证再说要长期经营
6 / 10

越高,越可能需要更宽的生态、后台、集成和自定义规则。

单一闭环完整平台

让 Sites 探路,
让 React 接住未来。

不是维护两个完整产品。更合理的是让两条路线承担不同任务,然后尽早决定唯一的数据真相。

01
Experiment lane

Sites:验证人和闭环

快速试“附近球友 → 邀请 / Host → Join → 聊天”是否真的被使用。每次实验只回答一个产品问题。

03
Product lane

React:承接品牌和深度

把验证过的功能带回自主域名与完整产品线;继续补 Community、通知、设置、测试和错误可见性。

六个词,
看懂整篇。

React

用来搭用户界面的工具。它擅长页面和交互,但不会自动替你决定登录、数据库和部署。

前端 Frontend

用户看见和操作的部分:页面、按钮、表单、导航、动画。

后端 Backend

在背后处理规则与数据的部分:能否 Join、比赛是否满员、谁有权限读消息。

数据库 Database

产品的长期记忆:用户、球场、比赛、参加者、消息都存在哪里。

部署 Deploy

把电脑里的代码变成别人能通过网址访问的线上产品。

平台锁定 Lock-in

产品越依赖某个平台独有的身份、数据或接口,未来搬家需要重新接线的部分越多。

建 app,
不是选一个最厉害的工具。

而是判断:这一阶段,最稀缺的是速度、控制,还是维护能力?对于第一次独立做产品的人,平台替你扛掉几层责任不是作弊;等用户真的回来、需求开始变复杂,再把值得拥有的部分接到自己手里。工具会更新,这个判断不会。