版权声明:本文为博主原创文章,未经博主允许不得转载。 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>
结果:
注意:
- 此方法并不推荐,推荐使用Node.js, webpack搭建React项目。
- <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。