<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>hello</title> </head> <body> <div> </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 content="width=device-width, initial-scale=1.0"> <title>hello</title> </head> <body> <div> </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 content="width=device-width, initial-scale=1.0"> <title>hello</title> </head> <body> <div> </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内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: