用于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/ }
        ]
    }
    
  1. jsx 语法的本质:并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;
  2. 在 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'));
    
  3. 在 jsx 中 写注释:推荐使用{ /* 这是注释 */ }
  4. 为 jsx 中的元素添加class类名:需要使用className 来替代 classhtmlFor替换label的for属性
  5. 在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
  6. 在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!

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

你可能感兴趣的:(react,jsx)