jsx语法
2019-10-13 本文已影响0人
高阳刘
什么是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中写注释
{/* 这里是注释,推荐使用 */}
{
// 这里是单行注释，不推荐使用
}
