超级详细的react笔记(三)jsx

1 引入

• jsx: javascript+xml
• react中样式结构行为都是用js编写的,由于在js中直接编写html代码会报错
• 出现了jsx,需要用babel来转换
• babel会将js中的结构代码解析成html代码,然后渲染到页面
• 说明:webpack引入依赖时,会因为版本问题出现很多的坑

2 babel下载与配置

• 基础下载

cnpm i babel-core babel-loader babel-plugin-transform-runtime

• 语法下载

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react

配置文件

• 创建.babelrc

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

• 配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const html = new HtmlWebpackPlugin({
    template: path.join( __dirname, './src/index.html' ),//源文件路径
    filename:'index.html'//在内存中的名字
})
module.exports = {
    mode: "development", // "production"-->为默认
    plugins:[
        html
    ],
    module:{
        rules:[
            {test:/.\js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }

}