基本使用
<!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测试数据/react@16/umd/react.production.min.js" ></script>
<script crossorigin src= "https://unpkg测试数据/react-dom@16/umd/react-dom.production.min.js" ></script>
<script src= "https://unpkg测试数据/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测试数据/react@16/umd/react.production.min.js" ></script>
<script crossorigin src= "https://unpkg测试数据/react-dom@16/umd/react-dom.production.min.js" ></script>
<script src= "https://unpkg测试数据/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测试数据/react@16/umd/react.production.min.js" ></script>
<script crossorigin src= "https://unpkg测试数据/react-dom@16/umd/react-dom.production.min.js" ></script>
<script src= "https://unpkg测试数据/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内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/aa2528877987/article/details/107589810
查看更多关于React html中使用react的两种方式的详细内容...