jsx语法

什么是jsx语法：就是符合xml规范的js语法（语法格式相对来说，要比HTML严谨）

1、如何启用jsx语法？

安装babel插件

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

安装能够识别jsx语法的包

cnpm i babel-preset-react -D

根目录下添加 .babelrc 配置文件

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

添加babel-loader配置项：

module: {
        // 所有第三方模块的配置规则
        rules:[//第三方匹配规则
            {test: /\.js|jsx$/, use: 'babel-loader', exclude:/node_modules/}
            //千万别忘记添加exclude排除项
        ]
    }

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

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

4、在jsx中写注释

{/* 这里是注释,推荐使用 */}
{
    // 这里是单行注释，不推荐使用
}

5、在jsx中元素添加class类名：需要使用className来代替class,htmlFor替换label的for属性

6、在jsx中创建DOM的时候，所有节点，必须有唯一的根元素进行包裹

7、在jsx语法中，标签必须成对出现，单标签必须自闭和