React节点渲染

我们在写React代码的时候在顶部会有这样的代码引入

import React from 'react';
import ReactDOM from 'react-dom';

当我们把第一行注释掉,浏览器会出现错误提示

'React' must be in scope when using JSX

这个是因为:
React负责逻辑控制,把数据(JSX代码)转换成VDOM
具体过程是:

• Ract使用JSX来描述UI
• babel-loader把JSX编译成相应的JS对象
• React.createElement再把这个JS对象构造成React需要的虚拟DOM.
• ReactDOM负责渲染实际的DOM,把虚拟DOM渲染成真实的DOM

这里我们输出一下babel把JSX编译成相应的JS对象后的样子

const div = <div></div>
console.log(div);

屏幕快照 2019-12-01 下午3.02.08.png