在 html 页面上使用由 <script> 标签加载的反应时使用 JSX

Question

是否可以使用 JSX 属性，无需捆绑器？（仅使用正在标签中加载反应的 HTML）

index.html 文件:

<html lang="en">
  <body>
    <div id="root"></div>

    <script src="react.development.js" crossorigin></script>
    <script src="react-dom.development.js" crossorigin></script>

    <script src="index.js"></script>
  </body>
</html>

index.js 文件:

class App extends React.Component {
  render() {
    return <div>Content</div>;
  }
}

const e = React.createElement;
const domContainer = document.querySelector("#root");
ReactDOM.render(e(App), domContainer);

Answer 1

您需要一个转译器，而不是打包器。您可以运行一个 client-side，但不应该，因为它会引入性能问题（并且会使调试代码变得更加困难）。

这在 the documentation 中有介绍：

The quickest way to try JSX in your project is to add this <script> tag to your page:
 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new <script> tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your <script> tags automatically.

在 html 页面上使用由 <script> 标签加载的反应时使用 JSX

Use JSX when using react loaded by <script> tag on html page

javascript

jsx

node.js

reactjs