react引包 && jsx语法的转换使用webpack打包工具

使用react框架要先安装react的一些包

npm i react -S
npm i react-dom -S

在使用webpack打包工具的前提下
在index.js文件中引入两个包

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

//当需要创建虚拟dom对象(以dom元素的结构创建js对象)时
const mydiv=React.createElement('div',{当前元素的属性},子元素)

ReactDOM.render(mydiv,document.getElementById('app'))
//把当前的这个虚拟dom渲染到页面的app容器中

但是总这么每创建一个虚拟dom就要这么麻烦,就出现了另一种写法jsx

jsx写法
const mydiv=<div id="box">哈哈哈<div>

正常在js文件中是不允许写html语言的,但是在react

一.安装babel插件

cnpm i babel-loader @babel/core @babel/runtime -D
语法包:
cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties  @babel/preset-react -D

安装能识别转换jsx语法的包 babel-perset-react

二.在webpack.config.js配置文件中添加babel配置使得打包时可以识别jsx语法

module.exports={
	model:'development',
	module{
		rules:[
		{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
	]
	}
}

三.添加babel的配置文件(.babelrc)中的配置

{
	"presets":["@babel/preset-env","@babel/preset-react"],
	"plugins":["@babel/plugin-transform-runtime", 	"@babel/plugin-proposal-class-properties"]
}

虽然表面上是直接写html但是实际上,是把html的哪些语法都转换成了createElement这一语句,最后mydiv接收的还是用js对象表示的虚拟dom