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'))