『React-Demos』Demo-01：Hello World

拎壳儿跑的蜗牛

已于 2022-10-13 16:44:04 修改

阅读量1k

点赞数

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

于 2020-01-12 13:48:51 首次发布

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

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

引言

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对比图