『React-Demos』Demo-02：JSX语法初步了解

拎壳儿跑的蜗牛

已于 2022-10-13 16:41:25 修改

阅读量692

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2020-01-13 23:35:16 首次发布

本文链接：https://blog.csdn.net/q761830908/article/details/103946381

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    引言 
通过上一节的学习，对于react也有了一个基础的认识，那么这节我们将通过俩个demo讲解JSX语法
让大家对于JSX有一个基础的认识和理解
React官网-JSX 简介
 
demo-02:JSX语法 
核心代码<body>
<div id="test1"></div>
<div id="test2"></div>
<div>-------------------------分割线-----------------------</div>
<div id="test3"></div>
<script type="text/javascript">
  // 第一种方式：创建虚拟DOM对象
  const h1 = React.createElement(
    'h1',
    { id: 'myTitile', className: 'myClass' },
    'Hello h1标签'
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  ReactDOM.render(h1, document.getElementById('test1'))

  // 用第一种创建方式，在h2标签中创建一个span标签
  const span = React.createElement('span', {}, '第一种方法创建span标签')
  const h2 = React.createElement(
    'h2',
    { id: 'myTitile', className: 'myClass' },
    span,
    span
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  ReactDOM.render(h2, document.getElementById('test2'))
</script>
<script type="text/babel">
  // 第二种方式：创建虚拟DOM对象
  const h3 = (
    <h3 id="myTitle2" className="myClass2">
      <span>第二种方法创建span标签</span>
      <span>第二种方法创建span标签</span>
    </h3>
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  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对象
 
 
 
 
总结： 
多敲、多记、多查（面向谷歌编程）
原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、转发✍
 

                

拎壳儿跑的蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
『React-Demos』Demo-02：JSX语法初步了解

引言通过上一节的学习，对于react也有了一个基础的认识，那么这节我们将通过俩个demo讲解JSX语法让大家对于JSX有一个基础的认识和理解React官网-JSX 简介demo-02:JSX语法核心代码<body><div id="test1"></div><div id="test2"></div><div&...
复制链接

扫一扫