如何在沒有構建過程的情況下使用React v16

Question

在React v15中，我可以輕松地執行以下操作：

<html>
    <head>
        <meta charset="UTF-8">
        <title>React v15</title>
    </head>

    <body>
        <div id="divContainer"></div>

        <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>

        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

        <script type="text/jsx">
            var HelloWorld = React.createClass({
                render: function() {
                    return <h2>Hello World !</h2>;
                }
            });


            ReactDOM.render(<HelloWorld />
                , document.getElementById('divContainer')
            )
        </script>
    </body>
</html>

一旦我引用react @ 16，react-dom @ 16，它就不再起作用，我知道React.createClass（）已被棄用和刪除。 那么它的替代品是什么？

我需要一種無需構建過程（例如browserify，webpack，require，import等）的簡單方法。我只想通過CDN或本地引用庫，如示例所示。

Answer 1

包含React 16庫之后，您可以直接訪問React實例並擴展React.Component

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React Hello World</title>
</head>

<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

  <script type="text/jsx">
    class MyApp extends React.Component {
      render() {
        return <span>Hello world</span>;
      }
    }
    ReactDOM.render(<MyApp />, document.getElementById('app'));
  </script>
</body>

</html>

如何在沒有構建過程的情況下使用React v16

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-25 20:54:18

如何在沒有構建過程的情況下使用React v16

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-25 20:54:18

解決方案1
0 已采納 2017-10-25 20:54:18