使用React开发网站时是否需要编写原生HTML，还是仅使用JSX即可？

两种开发模式没有绝对的对错，完全对应不同的项目场景：

• 「先编写原生HTML/CSS再引入React」的方案，基本只适用于两类场景：一是存量老站迭代，比如已经上线的传统企业官网、营销活动页本来就是纯静态实现，只需要加局部交互（比如表单校验、弹窗、列表筛选），完全没必要整站重构，直接引入React的CDN资源，把需要动态能力的DOM节点挂载成React组件就行，改造成本极低；二是对首屏加载速度要求特别高的轻量页面，尽量减少框架编译带来的额外运行时开销。
• 「全量采用React + JSX + CSS技术栈完成全量构建」是当前重交互Web产品的主流选择，比如SaaS系统、电商平台、内容社区这类需要频繁做状态更新、路由切换的项目，一般直接用Vite、Next.js这类工程化脚手架初始化项目，所有页面、组件都在JSX/TSX文件里编写，构建阶段工具会自动把JSX编译为浏览器可识别的原生代码，不需要提前手写完整的静态HTML结构。

这里要先纠正一个普遍的认知误区：JSX从来不是脱离HTML的独立技术，它本质就是原生HTML的JavaScript语法糖。你在JSX里写的<div>、<button>、<input>这类标签，和原生HTML的标签是一一对应的，编译后就是普通的浏览器DOM节点，不存在“用了React就不用写HTML”的说法，你只是换了一种支持嵌入JS逻辑的方式写HTML而已。

实际做React开发的时候，开发者几乎不可能完全不接触原生HTML代码：

• 哪怕是纯React工程化项目，根目录下的入口index.html一定是原生HTML文件，你需要在里面配置网站标题、meta标签、全局埋点脚本、公共字体引入这类全局内容，这部分没有框架可以替代。
• 如果需要对接非React生态的第三方原生JS库（比如传统图表插件、第三方SDK、旧版前端组件），你经常需要手动写原生DOM节点来挂载第三方内容，甚至要手动操作DOM完成交互。
• 做服务端渲染、静态站点生成的时候，如果你需要自定义站点的全局文档结构，也需要直接编写原生HTML代码。

至于“现代网站是否完全基于JSX开发”的说法完全不成立：
一方面现在互联网上还有海量存量站点是纯原生HTML/CSS/JS实现的，根本没有引入任何前端框架；另一方面，JSX只是开发阶段的语法，浏览器本身根本无法直接识别JSX代码，所有用JSX写的内容最终都会被编译成原生HTML/CSS/JS才能在用户浏览器里运行，不存在“网站直接跑JSX”的情况。

最后说句实在的，干前端别信什么“学了框架就可以丢原生基础”的鬼话，HTML/CSS/JS是所有前端技术的底子，不管你用React还是别的什么框架，写业务本质还是在搭HTML结构、处理样式、绑定交互，框架只是帮你省了手动更新DOM、拼接模板的重复劳动，原生基础打不牢，用框架写出来的代码照样一堆性能问题、兼容问题。

内容的提问来源于stack exchange，提问作者HappyJava