如何实现不依赖React使用JSX的Hello World示例？

JSX本身只是JavaScript的语法扩展，和React没有强绑定关系，编译阶段会被转换为普通的函数调用，默认调用React.createElement，我们只要自定义这个调用的函数，就能完全脱离React使用JSX。

1. 配置Babel编译规则 #

修改Babel配置文件（如.babelrc），指定自定义的JSX编译函数，示例我们用createMyElement作为自定义渲染函数：

{
  "presets": [
    ["@babel/preset-react", {
      "pragma": "createMyElement"
    }]
  ]
}

2. 实现自定义渲染函数 #

该函数负责把JSX转换后的参数组装为真实DOM元素：

function createMyElement(tag, attrs, ...children) {
  // 创建对应标签的DOM节点
  const dom = document.createElement(tag);
  // 绑定节点属性
  if (attrs) {
    Object.entries(attrs).forEach(([attrName, attrValue]) => {
      dom.setAttribute(attrName, attrValue);
    });
  }
  // 追加子节点
  children.forEach(child => {
    if (typeof child === 'string') {
      dom.appendChild(document.createTextNode(child));
    } else if (child instanceof Node) {
      dom.appendChild(child);
    }
  });
  return dom;
}

3. 编写JSX业务代码 #

写法和你在React里用JSX的方式完全一致：

function Welcome() {
  return <h1 style="color: #2196F3;">Hello, World</h1>;
}

// 把渲染结果挂载到页面上
document.querySelector('#root').appendChild(Welcome());

4. 编译后运行的纯JS代码（无React依赖） #

经过Babel编译后，上述JSX会被转换为完全不依赖React的原生JS代码，可以直接在浏览器运行：

// 自定义渲染函数
function createMyElement(tag, attrs, ...children) {
  const dom = document.createElement(tag);
  if (attrs) {
    Object.entries(attrs).forEach(([attrName, attrValue]) => {
      dom.setAttribute(attrName, attrValue);
    });
  }
  children.forEach(child => {
    if (typeof child === 'string') {
      dom.appendChild(document.createTextNode(child));
    } else if (child instanceof Node) {
      dom.appendChild(child);
    }
  });
  return dom;
}

function Welcome() {
  return /*#__PURE__*/createMyElement("h1", { style: "color: #2196F3;" }, "Hello, World");
}

document.querySelector('#root').appendChild(Welcome());

补充说明 #

• 如果你使用的是React17+版本的自动JSX转换模式，将runtime参数改为classic即可使用上述pragma配置，也可以修改importSource参数指向你自定义的工具模块。
• 本示例仅实现了最基础的DOM渲染能力，没有虚拟DOM、diff更新等React提供的上层能力，仅用于演示JSX可独立于React使用。

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