我们在写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
