如何在HTML中使用React
2019-06-04 本文已影响14人
张中华
如何在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/babel-standalone@6.26.0/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" 。
