likes
comments
collection
share

借助babel在html中写react代码

作者站长头像
站长
· 阅读数 9

记录在一下借助babel在html中写react代码能力


<!DOCTYPE html>
<html>
<head>
  <title>Babel Standalone Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.16.13/antd.min.js"></script>
  <Link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.16.13/antd.min.css" />
  <style>
    .container {
      width: 800px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script name="utils">
    // import 会被转化为这个require方法
    const require = (prop) => window[prop];
  </script>

  <script name="components" type="text/babel">
    import { Button, message } from 'antd';
    class MyComponent extends React.Component {
      render() {
        return <div className="container">
            <h1>借助babel在html中写react代码</h1>
            <Button onClick={() => {
              message.info('clicked')
            }}>MyComponent</Button>
        </div>;
      }
    }
  </script>

  <script name="app" type="text/babel">
    class App extends React.Component {
      render() {
        return <div className="container">
            <MyComponent />
        </div>;
      }
    }
  </script>

  <script name="index" type="text/babel">
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>

</body>
</html>