『React-Demos』Demo-01：Hello World

引言Demo-01主要讲React中的模板语法JSX，案例:Hello World源码✌：https://github.com/luckyMuChen/React-demos/tree/master/demo01demo01/sourceReact中的模板语法称为JSX。JSX允许将HTML标签直接放入JavaScript代码。ReactDOM.render()是将JSX转换为HTML...

拎壳儿跑的蜗牛

1007人浏览 · 2020-01-12 13:48:51

拎壳儿跑的蜗牛 · 2020-01-12 13:48:51 发布

引言

Demo-01主要讲React中的模板语法JSX，案例:Hello World

源码

React中的模板语法称为JSX。JSX允许将HTML标签直接放入JavaScript代码。ReactDOM.render()是将JSX转换为HTML，并将其呈现到指定的DOM节点的方法。

核心代码

<body>
  <div id="demo"></div>
  <script type="text/babel">
    // 1.创建虚拟DOM对象
    const h1 = <h1>Hello,World</h1>
    // 打印虚拟DOM
    console.log('====================================');
    console.dir(h1);
    console.log('====================================');
    // 打印真实DOM
    console.dir(document.getElementById('demo'))
    // 2.将虚拟DOM对象渲染到页面指定容器中
    ReactDOM.render(h1, document.getElementById('demo'))
  </script>
</body>

注解：

JSX语法:

ReactDOM.render(<h1>Hello World</h1>,document.getElementById('demo'))

创建一个虚拟DOM:

const h1=<h1>Hello World2</h1>

渲染虚拟DOM到页面中的指定的容器对象中:

 ReactDOM.render(h1,document.getElementById('demo'))

注意：
1. 问题: script标签中的type="text/javascript" 会报错:Uncaught SyntaxError: Unexpected token <
  解决: 修改script标签中的type="text/babel"
2. 虚拟DOM对象中的属性很少---------可以查看该对象是不是虚拟对象
  console.dir(h1)
3. 真实DOM对象中的属性很多---------可以查看该对象是不是真实DOM对象
  console.dir(document.getElementById('demo'))
虚拟DOM和真实DOM对比图

小结：

多敲、多记、多查（面向谷歌编程）
原创不易，希望可以帮到爱学习的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、转发✍

我伪装的很简单、强悍、坦然，听天由命般的在路口故意走散，你伪装的很不安、遗憾、心酸，却早有打算。 ------------------ 《伪装》大壮

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平