脚本宝典收集整理的这篇文章主要介绍了React html中使用react的两种方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
基本使用
<!DOCTYPE htML> <html lang="en"> <head> <;meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <title>hello</title> </head> <body> <div id="app"> </div> <script crossorigin src="https://unpkg.COM/react@16/umd/react.PRoduction.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> // 虚拟dom const str = 'hello react' const vDom = <h1>{str}</h1> // const vDom = <pppp>hello react</pppp> // 把虚拟dom转化成真实的dom ReactDOM.render(vDom,document.getElementById("app")) </script> </body> </html>
创建虚拟dom的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
</head>
<body>
<div id="app">
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script>
// 第一种纯js创建(一般不用)
// 虚拟dom
const str = 'hello react'
const vDom = React.createElement('h1', {
id: 'myId'
}, str)
// const vDom = <pppp>hello react</pppp>
// 把虚拟dom转化成真实的dom
ReactDOM.render(vDom, document.getElementById("app"))
//
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
</head>
<body>
<div id="app">
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 第一种纯js创建(一般不用)
// [] ul li 用foreach实现
VAR names = ['张飞','关羽','赵云']
const ul = <ul>
{
names && names.map((name,index)=>
<li key={index}>
{name}
</li>
)
}
</ul>
ReactDOM.render(ul,document.getElementById("app"))
//
</script>
</body>
</html>
知识点扩展：
React pwa的配置
在到webpack配置文件中添加插件
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim:true,
skipWaiting:true
})
],
到此这篇关于React html中使用react的两种方式的文章就介绍到这了,更多相关React html中使用react内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的React html中使用react的两种方式全部内容，希望文章能够帮你解决React html中使用react的两种方式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。