『React-Demos』Demo-02:JSX语法初步了解
其他
2020-01-14 10:40:25
阅读次数: 0
引言
- 通过上一节的学习,对于react也有了一个基础的认识,那么这节我们将通过俩个demo讲解JSX语法
- 让大家对于JSX有一个基础的认识和理解
- React官网-JSX 简介
demo-02:JSX语法
- 源码:demo02/source
- 核心代码
<body>
<div id="test1"></div>
<div id="test2"></div>
<div>-------------------------分割线-----------------------</div>
<div id="test3"></div>
<script type="text/javascript">
const h1 = React.createElement(
'h1',
{ id: 'myTitile', className: 'myClass' },
'Hello h1标签'
)
ReactDOM.render(h1, document.getElementById('test1'))
const span = React.createElement('span', {}, '第一种方法创建span标签')
const h2 = React.createElement(
'h2',
{ id: 'myTitile', className: 'myClass' },
span,
span
)
ReactDOM.render(h2, document.getElementById('test2'))
</script>
<script type="text/babel">
const h3 = (
<h3 id="myTitle2" className="myClass2">
<span>第二种方法创建span标签</span>
<span>第二种方法创建span标签</span>
</h3>
)
ReactDOM.render(h3, document.getElementById('test3'))
const id = 'myTitle3';
const className = 'myClass3';
const content = '我也是第二种方法创建span标签';
const myH1 = <h1 id={id} className={className}>
<span>{content}</span>
<span>我也是第二种方法创建span标签</span>
</h1>
ReactDOM.render(myH1, document.getElementById('test4'))
</script>
</body>
- 小结:
- 第一种方式使用的是 纯JS语法,不用设置
type="text/babel"
浏览器自动识别,但是缺点也很明显,使用麻烦
- 第二种方式使用的是JSX语法,需要设置
type="text/babel"
浏览器才可以识别,使用方便,推荐使用(react中也是使用这种语法)
- JSX语法:
- 以
<
开头代码,如果是html同名标签,会解析成HTML同名元素,如果不是,就会当做组件解析
- 以
{
开头代码,里面内容会当做js代码解析
- JSX语法作用:用来创建虚拟DOM对象
总结:
- 多敲、多记、多查(面向谷歌编程)
- 原创不易,希望可以帮助到可爱的你,喜欢的话请对我素质三连吧,☛点赞、✌关注、转发✍
发布了29 篇原创文章 ·
获赞 45 ·
访问量 7万+
转载自blog.csdn.net/q761830908/article/details/103946381