什么是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代码去编译;