React語法規則
阿新 • • 發佈：2021-09-03
1 React語法規則
1.1 使用jsx建立虛擬DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello react</title> </head> <body> <!--準備好一個“容器”--> <div id="test"></div> <!-- 引入react核心庫 --> <script type="application/javascript" src="../js/react.development.js"> </script> <!-- 引入react-dom,用於支援react操作dom --> <script type="application/javascript" src="../js/react-dom.development.js"> </script> <!-- 引入babel,用於jsx轉js --> <script type="application/javascript" src="../js/babel.min.js"> </script> <script type="text/babel"> // 定義一個虛擬DOM const VDOM = <h1>Hello, React</h1> // 渲染虛擬DOM到真實DOM上 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
1.2使用js建立虛擬DOM
const VDOM = React.createElement('h1',{id: 'root'}, React.createElement('span', {}, 'Hello, React'))
ReactDOM.render(VDOM, document.getElementById('test'))
1.3虛擬DOM與真實DOM
const VDOM = React.createElement('h1',{id: 'root'}, React.createElement('span', {}, 'Hello, React')) const TDOM = document.getElementById('demo') ReactDOM.render(VDOM, document.getElementById('test')) console.log('虛擬DOM：', VDOM) console.log('真實DOM：', TDOM)
1.4jsx語法規則
const myId = 'wTF' const myData = 'HeLlo, rEAct' const VDOM = ( <div> <h1 className="title" id={myId.toLowerCase()}> {/* 可以在標籤上寫樣式，但是必須寫雙花括號 */} <span style={{color: 'white'}}>{myData.toLowerCase()}</span> </h1> <h1 className="title" id={myId.toUpperCase()}> <span style={{color: 'white'}}>{myData.toLowerCase()}</span> </h1> <label> <input type="text" /> </label> </div> ) ReactDOM.render(VDOM, document.getElementById('test'))
1.4jsx小練習
const data = ['Angular', 'React', 'Vue']
const VDOM = (
<div>
<h1>前端js框架</h1>
<ul>
{
data.map((res, index) => {
return (
<li key={index}>{res}</li>
)
})
}
</ul>
</div>
)
ReactDOM.render(VDOM, document.getElementById('test'))