如何通过cdn使用jsx进行反应？答案

【问题标题】：How to use jsx in preact via cdn?如何通过cdn使用jsx进行反应？
【发布时间】：2018-08-10 01:16:16
【问题描述】：

从 preact 的站点获得此代码，并尝试在没有 babel 构建过程的情况下使其工作，但失败了，有人知道这是否可能吗？谢谢，

'use strict';

const { Component, h, render } = window.preact;

render((
    <div id="foo">
        <span>Hello, world!</span>
        <button onClick={ e => alert("hi!") }>Click Me</button>
    </div>
), document.body);

【问题讨论】：

标签： preact

【解决方案1】：

您不能直接在 JavaScript 中使用 JSX，因为它是无效的语法。要将 preact 运行到客户端，您必须将 jsx 代码转换为有效的 javascript，或者使用 preact 提供的辅助方法（Component、h、render）。

HTML

<h1>Render by Preact client library using h and render function</h1>
<div id="preact">

</div>

JavaScript

var Component = window.preact.Component, 
    h = window.preact.h, 
    render = window.preact.render;

var PreactApp = function (props){
  return h('h1',
  {className: ''},
  'Hello from Preact world!');
}

render(PreactApp(),document.getElementById("preact"));

如果你在 JS 中看到 h （将 jsx 转换为 vdom ）和 render （将 vdom 转换为 html ）函数实际上可以做到这一点。从官方文档中了解更多信息 - https://preactjs.com/guide/api-reference

工作示例 - https://jsfiddle.net/97125m3z/2/

【讨论】：

【解决方案2】：

从技术上讲，可以通过使用 HTM 包来实现，只要您的目标是最新的能够理解模板字符串的浏览器。详情请见https://github.com/developit/htm。

但是，这将比简单地使用 h() 创建组件要慢，因为它是一大堆字符串解析。这也使得在 IDE 中使用语法高亮变得很困难，这让调试变得令人沮丧。

当我第一次习惯在没有构建步骤的情况下使用 Preact 时，我使用了 HTM，但很快将其替换为手动创建组件并消除了 JSX。

如果您不使用 JSX 抽象，您将更好地了解所有内容如何组合在一起。无论如何，Babel 将其编译为 createElement 调用。

【讨论】：

【解决方案3】：

是的。您必须在您的 jsx 代码之前包含 babel 并将脚本用作 type="text/babel" 参见下面的 react 示例

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
  class App extends React.Component {
    render() {
      return (
        <div className="app-content">
          <h1>Hello from React</h1>
        </div>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>

【讨论】：