React html中使用react的兩種方式
更新時間:2021年04月06日 11:35:20 作者:愚公搬代碼
這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼,給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
基本使用
<!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 = <h1>{str}</h1> // const vDom = <pppp>hello react</pppp> // 把虛擬dom轉化成真實的dom ReactDOM.render(vDom,document.getElementById("app")) </script> </body> </html>
創(chuàng)建虛擬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創(chuàng)建(一般不用) // 虛擬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.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創(chuàng)建(一般不用) // [] 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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React中super()和super(props)的區(qū)別小結
本文主要介紹了React中super()和super(props)的區(qū)別小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03react使用antd-design中select不能及時刷新問題及解決
這篇文章主要介紹了react使用antd-design中select不能及時刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式
這篇文章主要介紹了React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09