具體使用案例
- 核心庫
-
- 下載下傳
- 導入核心庫
- 使用案例
- 使用js建立虛拟DOM
- jsx
- 案例：動态顯示資料清單
-
- js表達式與語句
- 實作
核心庫
下載下傳
官網
點選‘GitHub’–>整體包的下載下傳
曆史版本
浏覽器開發下載下傳如下：
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
也可以使用python腳本先擷取三個js庫
import requests
url = "https://unpkg.com/[email protected]/umd/react.development.js"
url1 = "https://unpkg.com/[email protected]/umd/react-dom.development.js"
url2 = "https://unpkg.com/[email protected]/babel.min.js"
urls = [url,url1,url2]
headers = {"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36"}
for i in urls:
res = requests.get(i,headers=headers)
filename = i.split("/")[-1]
with open(filename,"wb") as f:
f.write(res.content)
導入核心庫
<script type="text/javascript" src="/js/react.development.js"><!--全局使用React-->
<script type="text/javascript" src="/js/react-dom.development.js"><!--全局使用ReactDOM-->
<script type="text/javascript" src="js/babel.min.js"><!--babel實作jsx到js的轉換-->
以上三個核心庫，需要按照順序導入
使用案例
建立一個檔案夾
reactProject>js目錄
reactProject>pages目錄
pages>helloReact.html
hellpReact.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react project</title>
</head>
<body>
<!-- 導入核心庫 16.14-->
<!-- 全局使用React -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 全局使用ReactDOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- jsx到js的轉換 -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 建立一個容器 渲染虛拟DOM為真實DOM-->
<div id="content"></div>
<!-- 建立虛拟DOM -->
<script type="text/babel">
// 聲明常量
const VDOM = <div>hello React,this is my first reactProject!</div>
//渲染虛拟DOM，如下格式固定
ReactDOM.render(VDOM,document.getElementById("content"))
</script>
</body>
</html>
在vscode運作頁面
右鍵–>open with Live Server
沒有則需要安裝live server插件
以上代碼需在開發環境中運作，生成環境還需編譯
使用js建立虛拟DOM
<script type="text/javascript">
const VDOM = React.createElement("div",{id:"block1"},"content")
//多層标簽嵌套
const VDOM1 = React.createElement("div",{id:"block2"},React.createElement("div",{id:"block3"},React.createElement("div",{id:"block4"},"多層嵌套")))
console.log(VDOM)
console.log(document.getElementById("content"))//真實DOM
console.log(typeof VDOM)//Object對象 instanceOf Object
//VDOM 普通的Object對象
//VDOM 是輕量級、真實DOM是重量級的
//VDOM最終被React轉為 真實的DOM
</script>
當多層次DOM節點嵌套時，使用js建立DOM節點相當繁瑣，是以使用jsx建立虛拟DOM，簡化
jsx
javascript + xml
是react定義的類似xml的js擴充文法
本質：React.createElement(component,props,content)
作用：簡化建立虛拟DOM
- 不是字元串，不同于js
-
标簽不是html/xml，但可以轉為html
小寫的标簽，會自動轉為html對應的标簽，但是如果html不存在對應的标簽，報錯
大寫首字母，自動渲染React元件，若元件沒有定義則報錯
- 涉及js變量時，使用{ myId }，類名屬性使用className=“bg”
- 内聯的style = {{color:“red”,}}，内部隻能有一個根節點，且每個節點必須閉合
- 示例
<script type="text/babel">
var myId = 20
const VDOM = (
<div>
<h1 className="title" id={myId}>
<span style={{color:"white"}}>{myData}</span>
</h1>
<input type="text" />
<hello>hello</hello>
<Hello>Component</Hello>
</div>
)
</script>
案例：動态顯示資料清單
jack-18
tom-20
lucy-40
…
ajax向後端發送請求，拿到資料，處理資料，建立虛拟DOM，呈現頁面
js表達式與語句
-
表達式，有傳回值
如：a，a+b , arr.map(e=>{return e+1})，func()，function test(){}…
-
語句，沒有傳回值
if(){}
for(){}
switch(){}
VDOM中隻能寫 {js表達式}，給一個數組，可以周遊，但是對象不行。
實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic data</title>
</head>
<body>
<!-- import kernel lib -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel">
// let arr = [{name:"jack",age:"18"},{name:"tom",age:"20"},{name:"lucy",age:"40"}]
let arr = ["jack","tom","lucy"] //虛拟DOM中給數組，可以周遊，對象不行
const VDOM = (
arr.map((element,index)=>{
return <li key={index}>{element}</li>
})
)
// render VDOM
ReactDOM.render(VDOM,document.getElementById("list"))
</script>
</body>
</html>
上一篇：js架構----react.js 下一篇：
![umi + react+antd遇到的問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)