无需安装Node.js，如何在受限PHP服务器的.js文件中使用React与JSX

你第一组测试报错的核心逻辑非常明确：
babel-standalone 具备JSX转译能力，但它的默认处理逻辑仅覆盖HTML页面中直接嵌入的、type属性为text/babel的内联代码，不会自动识别普通script标签引入的外部JS文件。
你之前直接用 <script src="xxx.js"> 引入JSX编写的文件时，浏览器会将该资源按标准原生JS规则解析，遇到JSX的类XML语法时自然抛出 Unexpected token 错误，和你本地是否安装Node环境没有关系。

所有方案完全依托你已经引入的react、react-dom、babel-standalone CDN资源实现，不需要在服务器上安装任何软件，也不需要在本地做预编译，可直接落地：

方案1：直接修改外部JSX文件的引入属性（最简方案） #

把你原来的普通JS引入标签：

<script src="/static/js/app.js"></script>

替换为带babel转译标识的引入标签：

<script type="text/babel" data-presets="react" src="/static/js/app.js"></script>

当babel-standalone检测到该script标签的type为text/babel时，会自动发起请求拉取src指向的外部JS资源，在浏览器端完成JSX到原生JS的转译后，再将可执行代码交给浏览器运行，全程无额外环境依赖。

方案2：手动控制外部JSX文件的拉取与转译 #

如果场景不支持直接修改script标签的src属性，可以在页面中添加一段极简引导脚本，手动完成外部JS文件的拉取、转译、执行流程：

<script>
// 替换为你自己的JSX文件路径
const jsxFilePath = '/static/js/app.js'
// 拉取外部JSX原始代码
fetch(jsxFilePath)
  .then(res => res.text())
  .then(rawCode => {
    // 调用已引入的babel-standalone完成语法转译
    const executableCode = Babel.transform(rawCode, {
      presets: ['react']
    }).code
    // 执行转译后的原生JS逻辑
    eval(executableCode)
  })
</script>

该方案的运行逻辑和方案1完全一致，只是把babel自动处理的流程拆成了手动可控的步骤。

• 所有转译流程都在用户的浏览器端完成，开发调试阶段完全可用；如果后续需要优化生产环境的加载性能，可以在任意可临时运行Node的设备上把JSX预先编译为原生JS，再上传到受限服务器即可，不需要在服务器本身安装编译工具。
• 保持现有依赖版本的匹配即可：你当前使用react@16搭配babel-standalone@6，使用react预设即可100%兼容现有JSX写法，不需要额外引入其他预设资源。
• 不要重复引入同一份JSX文件，否则会出现逻辑重复执行的问题。

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