Question

从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);

Answer 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/

Answer 2

从技术上讲，只要您针对的是了解模板字符串的最新浏览器，就可以使用HTM包。有关详细信息，请参见https://github.com/developit/htm。

但是，这比使用h（）创建组件要慢得多，因为它是整个字符串解析堆。这也使得在IDE中难以使用语法高亮显示，这使调试令人沮丧。

当我第一次习惯使用Preact而没有构建步骤时，我使用了HTM，但是很快便用手工创建组件来替换它，并取消了JSX。

如果不使用JSX抽象，则可以更好地理解所有内容如何组合在一起。 Babel仍将其编译为createElement调用。

Answer 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>

如何通过CDN在Preact中使用jsx？

3 个答案: