JSX为何是合法JavaScript语法？React对JSX的处理逻辑是怎样的？

1. JSX语法合法性的原理 #

你关于「JSX会被预先转换为原生JS代码、逻辑类似C预处理器处理宏」的核心猜测是正确的。
JSX本身不属于ECMAScript定义的原生JS语法，无法直接在JS引擎中运行，所有JSX代码都会在构建阶段被替换为标准JS代码后才会进入运行环境。
不过编译工作不是React本身完成的，而是由Babel、SWC、TypeScript编译器（tsc）这类前端构建链中的转译工具实现，React官方只负责定义JSX的转译规范，以及提供转译后代码需要调用的运行时方法。

举个实际转译例子：
原始JSX代码：

function Card({ title }) {
  return <div className="card">
    <h3>{title}</h3>
  </div>
}

转译后的标准JS代码（React17+版本）：

import { jsx as _jsx } from "react/jsx-runtime";
function Card({ title }) {
  return _jsx("div", {
    className: "card",
    children: _jsx("h3", { children: title })
  });
}

2. React的定位是否属于普通JS库 #

将React定义为JS库是完全准确的。
你觉得它的定位高于普通JS库，主要是因为React是一套完整的视图层解决方案，自带渲染调度、状态管理、生命周期管理等全套能力，还需要配合构建工具链使用，和lodash这类仅提供单一工具能力的小型JS库的使用体验差异很大，但它本质依然符合JS库的定义：

• 所有能力都运行在标准JS运行时之上，不需要对JS引擎做任何底层修改
• 转译后的代码本质都是调用React暴露的公共方法，没有React依赖的话转译后的JSX代码也无法正常运行

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