用于react 中的JSX语法配置方法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

1.如何启用 jsx 语法？

安装 babel 插件
- 运行npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime -D
- 运行 npm i @babel/preset-env @babel/plugin-proposal-class-properties -D
安装能够识别转换jsx语法的包,就是将jsx转化为js @babel/preset-react
- 运行npm i @babel/preset-react -D

添加 .babelrc 配置文件

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

添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的；

在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

渲染数字
渲染字符串
布尔值实现三元表达式
为属性绑定值
渲染jsx元素
渲染jsx元素数组
将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】

例如:
// 使用react这个包，用来创建组件和虚拟DOM元素
import React from "react";
// react-dom这个包，主要用来实现DOM操作，必须把组件或虚拟DOM元素渲染到页面指定的容器中
import ReactDOM from "react-dom";

const n1 = 100
let boo = false
const tstr = 'abcd'
const arr1 = ['a', 'b', 'c', 'd']
const newArr = []
arr1.forEach((item, i) =>{
   const h4= <h4 key={i}>{item}</h4>
   newArr.push(h4)
})

const myDiv = (
  <div title="aaa">
    <p>{n1}</p>
    <p>-------</p>
    <p>{boo? '条件为真': '条件为假'}</p>
    
    <button title={tstr}>这是按钮</button>
    {newArr}
  </div>
);

ReactDOM.render(myDiv, document.getElementById('app'));

在 jsx 中写注释：推荐使用{ /* 这是注释 */ }
为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
在 jsx 语法中，标签必须成对出现，如果是单标签，则必须自闭和！

当编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把花括号内部的代码当作普通JS代码去编译；

用于react 中的JSX语法配置方法

猜你喜欢