Question

我一直在研究React，现在我只想尝试在某些页面上实现它，作为我上司工作的概念证明。我如何使用老式的脚本标签，而不是导入标签？

我已经可以使用浏览器中的babel编译器

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="output"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>Hello world!!</div>,
        document.getElementById("output")
      );
    </script>
  </body>
</html>

这有效，但是如何在此处创建React组件？创建扩展Component的类将引发未定义的错误。如何使用此方法import React, {Component} from 'react';？以及如何使用外部jsx文件中的组件？

Answer 1

为什么不呢？

<script type="text/babel">
  // Define children components here

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

  ReactDOM.render(
    <App />,
    document.getElementById("output")
  );
</script>

UPD

对于一些组件，只需在父组件之前写下子组件（请查看我的代码中的注释）。如果您有很多组件，请开始使用webpack

之类的构建器

如何在基于jQuery的Web应用程序中实现React？

1 个答案: