开发者学堂课程【React 入门与实战：在 React 项目中启用 JSX 语法】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8083
在 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>
运行代码：
这样很方便，当时它不是直接把标签丢在页面，内部是转换的过程。
