基本使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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> |
創建虛擬dom的兩種方式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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('h1', { id: 'myId' }, str) // const vDom = <pppp>hello react</pppp> // 把虛擬dom轉化成真實的dom ReactDOM.render(vDom, document.getElementById("app")) // </script></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!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配置文件中添加插件
|
1
2
3
4
5
6
7
8
9
10
|
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內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/aa2528877987/article/details/107589810
