有人可以提供一个不使用 React 的 JSX 的“hello world”示例吗？答案

【问题标题】：Can someone provide a "hello world" example of JSX being used with out React?有人可以提供一个不使用 React 的 JSX 的“hello world”示例吗？
【发布时间】：2021-10-31 13:09:27
【问题描述】：

我一直听说这两者没有联系在一起，你可以在没有 React 的情况下将 JSX 编译为 JavaScript，但我从未见过。

例如：

function Welcome() {
  return <h1>Hello, World</h1>;
}

如果我将它提供给 babel 编译器，我会得到：

function Welcome() {
  return /*#__PURE__*/React.createElement("h1", null, "Hello, World");
}

这需要 React 库。

您可以在这里在线查看：

https://babeljs.io/repl/

有人可以提供一个不使用 React 就使用 JSX 的 Hello World 示例吗？

【问题讨论】：

如果您不想使用 React（例如，不使用道具、状态、效果等），那么为什么不使用innerHTML？以前innerHTML 很麻烦，但现在使用模板文字就变得不那么麻烦了。你几乎可以让它看起来像 React 代码

标签： javascript reactjs xml babeljs jsx

【解决方案1】：

Here's a good resource. 只需编写一个createElement 函数，将React.createElement 替换为。

// Setup some data
const name = 'Geoff'
const friends = ['Sarah', 'James', 'Hercule']

// Create some dom elements
const app = (
  <div className="app">
    <h1 className="title"> Hello, world! </h1>
    <p> Welcome back, {name} </p>
    <p>
      <strong>Your friends are:</strong>
    </p>
    <ul>
      {friends.map(name => (
        <li>{name}</li>
      ))}
    </ul>
  </div>
)

// Render our dom elements
window.document.getElementById('app').replaceWith(app)

<div id='app'></div>
<script>
window.React = {
// A jsx pragma method to create html dom elements (more info below)
  createElement(tagName, attrs = {}, ...children) {
    const elem = Object.assign(document.createElement(tagName), attrs)
    for (const child of children) {
      if (Array.isArray(child)) elem.append(...child)
      else elem.append(child)
    }
    return elem
  }
};
</script>

上面使用的是客户端 Babel 转译器，它会自动将 JSX 语法转换为对 React.createElement 的引用 - 但不是导入 React 库，而是定义了一个自定义 window.React，使用您的自定义 createElement 函数。

对于预编译的项目，你需要将你的 Babel 配置设置为

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "createElement" }]
  ],
  "comments": false
}

具有全局 createElement 函数。

【讨论】：

感谢您的回答，但我不想编写自己的库来将 JSX 转换为 JavaScript。我假设有人已经这样做了。类似于 React 的东西，但要简单得多，因为我不需要虚拟 DOM 和 React 提供的许多功能。肯定有人这样做了，轮子不需要重新发明。
你不需要编写自己的库——你说过你想要的只是能够在没有 React 的情况下使用 JSX，对吧？这就是答案中的代码所做的 - 您所需要的只是（示例）8 行 createElement 函数。