本篇文章为大家展示了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中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
