如何在HTML中使用React

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhonghua_csdn/article/details/90815860

如何在html中使用React,也就是在静态html中如何使用react的CND并且使用React。
引入方式:
在Head中添加这些CDN:

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.js"></script>

利用React进行开发:

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

        <script type="text/babel">
          class App extends React.Component {
            render() {
              return <h1>Hello world!</h1>
            }
          }
          ReactDOM.render(<App />, document.getElementById('root'))
        </script>
</body>

结果:


2789632-4229c86a7d4fb0b6.png

注意:

  1. 此方法并不推荐,推荐使用Node.js, webpack搭建React项目。
  2. <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。

猜你喜欢

转载自blog.csdn.net/zhonghua_csdn/article/details/90815860