Two Ways to Use react in React html
- 2021-11-01 23:19:58
- OfStack
Basic use
<!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">
// Virtual dom
const str = 'hello react'
const vDom = <h1>{str}</h1>
// const vDom = <pppp>hello react</pppp>
// Put virtual dom Turn into real dom
ReactDOM.render(vDom,document.getElementById("app"))
</script>
</body>
</html>Two Ways to Create a Virtual 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>
// No. 1 1 Seed purity js Create (1 No need )
// Virtual dom
const str = 'hello react'
const vDom = React.createElement('h1', {
id: 'myId'
}, str)
// const vDom = <pppp>hello react</pppp>
// Put virtual dom Turn into real 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">
// No. 1 1 Seed purity js Create (1 No need )
// [] ul li Use forEach Realization
var names = [' Zhang Fei ',' Guan Yu ',' Zhao Yun ']
const ul = <ul>
{
names && names.map((name,index)=>
<li key={index}>
{name}
</li>
)
}
</ul>
ReactDOM.render(ul,document.getElementById("app"))
//
</script>
</body>
</html>Extension of knowledge points:
Configuration of React pwa
Add plug-ins to the webpack configuration file
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim:true,
skipWaiting:true
})
],