目录
1. 需要准备的三个文件
2. jsx 和 js 创建虚拟DOM 的区别
虚拟dom 如果学过vue的话 是很好理解的 这块几乎都是采用了diff算法来使用虚拟DOM转换成真实DOM 这块不在详细描述
使用jsx创建虚拟DOM
<body>
<div id="a"></div>
<!-- 引入 react核心库 -->
<script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
<!-- 引入babel 用jsx转为js -->
<script type="text/javascript" src="./依赖包/旧版本/babel.min.js"></script>
<script type="text/babel">
const VDOM = (
<div>我是div</div>
)
// 渲染DOM到页面
eactDOM.render(VDOM,document.getElementById('a'))
</script>
</body>使用js创建虚拟DOM
<body>
<div id="a"></div>
<!-- 引入 react核心库 -->
<script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
<!-- 引入babel 用jsx转为js -->
<script>
// 创建虚拟dom document.createElement('标签',属性,标签内容)
const VDOM = React.createElement('div',{id:'title'},'我是div')
// 将虚拟dom 放入页面
ReactDOM.render(VDOM,document.querySelector('#a'))
</script>
</body>我们发现 jsx 和 js 都能创建虚拟DOM 为什么选中jsx呢
这时候多了一个条件 如果在 div里面在加一个div呢
jsx语法
const VDOM = (
<div>
<div>我是div</div>
</div>
)
// 渲染DOM到页面
ReactDOM.render(VDOM,document.body)js语法
const VDOM = React.createElement('div',{id:'title'},React.createElement('div',{},'我是div'))
// 将虚拟dom 放入页面
ReactDOM.render(VDOM,document.querySelector('#a'))我们发现 如果通过js去写 会一直连续写下去，如果说写10个、100个呢，所以总结一下jsx的好处
jsx就像js的语法糖一样 多层嵌套比较方便，但是jsx的原理就是js语法的代码 只不过不用我们手动去写
3. jsx语法
（1）创建虚拟DOM不要加引号
这块算是一个注意点吧 我们平常写js 定义变量都习惯性加上' ' 但是jsx不一样
const VDOM = (
<div>
<div>我是子集</div>
</div>
)（2）使用js定义的变量
使用变量 要用 { }包起来
let userName="奥特曼"
const VDOM = (
<div>
<div>{userName}</div>
</div>
)（3）使用calss类名
使用class类名 名字叫 className 注意N要大写
<style>
.title {
color: pink;
font-size: 50px;
}
</style>
<body>
<div id="a"></div>
<!-- 引入 react核心库 -->
<script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
<!-- 引入babel 用jsx转为js -->
<script type="text/javascript" src="./依赖包/旧版本/babel.min.js"></script>
<script type="text/babel">
let userName="奥特曼"
// 创建虚拟DOM 多层嵌套 jsx 的好处
const VDOM = (
<div>
<div className="title">{userName}</div>
</div>
)
// 渲染DOM到页面
ReactDOM.render(VDOM,document.getElementById('a'))
</script>
</body>（4）使用style
要用{{ 属性 : '值' , 属性 : '值' }} 中间逗号隔开哦
const VDOM = (
<div>
<div style={{textAlign:'center',fontWeight:'400'}} className="title">奥特曼
</div>
</div>
)（5）只能有一个根标签
这块 和vue2.0是很相似的
const VDOM = (
<div>
<div>奥特曼1</div>
<div>奥特曼2</div>
</div>
)（6）不能出现单标签
const VDOM = (
<div>
<div>奥特曼</div>
<input type="text" />
<input type="text"></input>
</div>
)（7）小写转为html标签、首字母大写转为组件
例如我们写了一个div他会自动转换为html标签，平常我们定义组件都是起一个英文名字 这时候如果我们全部小写一个浏览器不认识的名字
const VDOM = (
<div>
<aoteman></aoteman>
</div>
)这时候就会报错了 大致意思急速 aoteman浏览器不认识 如果你想使用React组件请使用首字母大写
总结一下