在React项目中启用JSX语法
目录：
一、React项目示例
二、JSX语法概念
三、JSX本质
四、启动JSX
一、React项目示例
1.创建index.js
//第一步：导入包
import React from 'react'
import ReactDoM from 'react-dom'
//第二步：创建虚拟DOM，构建好属性也可不在此构建
const mydiv = React.createElement( 'div', ( id: 'mydiv', title: 'div aaa' )，"这是一个div元素’)
//第三步：调用render函数渲染
//调用ReactDOM,给一个DOM元素容器
ReactDoM . render(mydiv,document.getElementByid ( ' app ' ))
2.创建Index.html
<!DOCTYPE html><html lang "en">
<head>
<meta charset="UPE-8">
<title>Index首页</title>
<!-- <script src=" . ./ dist/main.js"></ script> -->
<!-- <script src=" / main .js"></script> -->
</ head>
<body>
<!--创建一个容器，将来渲染的虚拟DoM，会放到容器内显示--><div id="app ></div>
</ body>
</ html>
3. 运行项目
(1) 打开终端输入：
//使用npm
PS C:\Users\liulongbin\DesktopIreact-day1
代码\e1.webpack-base> npm run dev
(2) 弹出浏览器
回顾：什么时虚拟DOM?
用JS对象的形式来表示DOM与DOM之间的嵌套关系
HTML是最优秀的标记语言；
想要创建虚拟DOM,在页面上即使普通标签
官网封装代码：
Const mydiv=<div id=”mydiv” title=”div aaa”>这是一个div元素</div>
//类似于html标签语言，但不符合js代码规范
////注意:在Js 文件中，默认不能写这种类似于HTM的标记;否则打包会失败;
与
const mydiv = React.createElement( 'div', ( id: 'mydiv', title: 'div aaa' )，"这是一个div元素’)
效果一样
运行代码：
报错解决：
可以使用babel来转换这些Js 中的标签;
Const是一个简单的js对象，要么是一个复杂的js对象，在js中混合写入类似于HTTML的语法叫做JSX语法
二、JSX语法
1.概念
在Js 中，混合写入类似于HTM的语法，叫做Jsx语法;
符合XML规范的JS语法
Jsx默认情况下浏览器不识别，可以把jsx语法转一下，通过babel工具转化为react,createElement语法来执行
2.本质
Jsx语法的本质，还是在运行的时候，被转换成了React.createElement 形犹来执行的
转化后通过API调用转换好之后运行在页面
3.启动jsx
（1）安装babel插件
//安装两套包
运行
Cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
安装执行结果：
//两个语法：第一个预防env，第二个语法stage-0
运行cnpm i babel-preset-errv babel-preset-stage-e -D
安装执行结果：
打开webpack.config.js
添加：
//向外暴露一个打包的配置对象;因为 webpack是基于Node构建的;所以 webpack支持所有Node API 和语法
//webpack默认只能打包处理.js后缀名类型的文件，像.png,vue无法主动处理，所以要配置第三方loader
module.exports = {
mode: 'development', ll developmentproduction
//在 webpack 4.x中，有一个很大的特性，就是约定大于配置﹑约定，默认的打包入口路径是 src -> index.js
plugins: [
htm1P1ugin
] ,
//只要webpack遇见不能处理的东西，都会第一时间需要第三方模块
module: {//所有第三方模块的配置规则
Rules:{//第三方匹配规则,以js或者jsx文件结尾的
//一个loader可以写为字符串，多个需要写为数组
//一定要添加exclude，否则整个项目是运行不起来的，会报错
{test:/\.js|jsx$/，use:’babel-loader’，exclude：/node_modules/},//千万别忘记添加排除项
]
}
}
（2）安装能够识别转换jsx语法的包
babel-preset-react
//把不认识的jsx语法转换为识别的语法
运行cnpm i babel-preset-react -D
（3）添加.babelrc]配置文件
Bebel项目文件一般放入项目的根目录下，命名为.babelrc,千万不要忘记添加.,要符合js语法规则，双引号且不能写注释
{
//数组：放置所有语法
"presets" : [ "env", "stage-0" , "react"],
//数组：放置所有插件
"plugins": ["transform-runtime""]
//顺序没有差别
}
配置好bebal后运行代码：
实现嵌套：在index.js中添加代码：
Const mydiv=<div id=”mydiv” title=”div aaa”>这是一个div元素</div>
<h1>这是一个大大的H1</h1>
运行代码：
这样很方便，当时它不是直接把标签丢在页面，内部是转换的过程
