首先我们来看看下面的代码
import "react" from "react";
const element = (<div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>1</div>
<div>2</div>
</div>)
console.log(element)
问题来了,
element
是如何输出上图所示的结构的?
环境配置
安装react
和babel
npm i react react-dom --save
npm i @babel/core @babel/preset-env @babel/plugin-transform-react-jsx --save-dev
配置babel
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
{
"presets": [
"@babel/preset-env"
],
"plugins":