1.React元素
1.1 React.createElement()
React.createElement(type, [props], [...children]) - 用來創建React元素，React元素無法修改
1.2 ReactDOM.createRoot()
createRoot(container[, options]) - 用來創建React的根容器，容器用來放置React元素
1.3 root.render()
root.render(element)
當首次調用時，容器節點裏的所有 DOM 元素都會被替換，後續的調用則會使用 React 的 DOM 差分算法（DOM diffing algorithm）進行高效的更新。
不會修改容器節點（只會修改容器的子節點）。可以在不覆蓋現有子節點的情況下，將組件插入已有的 DOM 節點中。
演示代碼
需要下載和導入依賴 https://unpkg.com/[email protected]/umd/react.development.js，https://unpkg.com/[email protected]/umd/react-dom.development.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>React01</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> </head> <body> <div id="root1"></div> <div id="root2"></div> <button id="trigger">Show Button</button> <script> //create <div> by DOM const div = document.createElement('div'); console.log(div); div.innerText = "this is a <div>"; const root1 = document.getElementById("root1"); root1.appendChild(div); // create <div> by React // params: 1.element name 2.element attribute 3.the child element of element const div2 = React.createElement("div", {}, "this is a <div> create by React"); console.log(div2); // create Root element const root2 = ReactDOM.createRoot(document.getElementById("root2")); // render div to root element root2.render(div2); /** update DOM by React, replace all element when need update */ const btn = document.getElementById("trigger"); btn.addEventListener('click', () => { const btn = React.createElement("button", { id: "btn2", className: "btn2", onClick: () => { confirm("go ahead!!!") } }, "New Button"); const div2 = React.createElement("div", {}, "this is a <div> create by React",btn); // render div to root element root2.render(div2); }); </script> </body> </html>
2.JSX
JSX是JavaScript 的語法擴展，JSX 使得我們可以以類似於HTML的形式去使用JS。JSX便是React中聲明式編程的體現方式。聲明式編程，簡單理解就是以結果爲導向的編程。使用JSX將我們所期望的網頁結構編寫出來，然後React再根據JSX自動生成JS代碼。所以我們所編寫的JSX代碼，最終都會轉換爲以調用React.createElement()創建元素的代碼。由於JSX最終需要轉換爲JS代碼執行，所以瀏覽器並不能正常識別JSX，所以當我們在瀏覽器中直接使用JSX時，還必須引入babel來完成對代碼的編譯。
演示代碼
需要進入babel依賴，https://unpkg.com/babel-standalone@6/babel.min.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>React01 JSX</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> </head> <body> <div id="root1"></div> <script type="text/babel"> const title = "use babel"; const content = "just demo jsx, and need import bable, setup script type='text/bable'"; const fn = () => "call funtion and get the return value"; const div = <div className="jsx"> <header style={{ fontSize: '20px' }}>{title}</header> <p>{content}</p> <textarea>{fn()}</textarea> </div>; const root = ReactDOM.createRoot(document.getElementById("root1")); root.render(div); </script> </body> </html>
JSX的注意事項：
1.html標籤不要加引號
2.有且只有一個根標籤
3.html標籤小寫開頭，React組件大寫開頭
4.可以使用{}插入JS表達式。（表達式：有返回值的語句。JSX也是表達式）
5.屬性正常寫（class使用className，style必須用{}）
6.標籤必須正常閉合
7.布爾類型、Null 以及 Undefined 將會忽略