本篇文章为大家展示了react如何在React 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"> // 虚拟dom const str = 'hello react' const vDom = <h2>{str}</h2> // 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('h2', { 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如何在React html中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
