React.js中JSX的原理与关键实现

在开始开发之前,我们需要创建一个空间项目文件夹。

安装

  1. 初始化
npm init -y

2.安装webpack相关依赖

npm install webpack webpack-cli -D
  1. 安装babel-loader相关依赖
npm install babel-loader @babel/core @babel/preset-env -D
  1. 安装jsx支持依赖
npm install @babel/plugin-transform-react-jsx -D

配置

  1. 在根目录下创建main.js文件
    此文件为入口文件。
  2. 在项目根目录下创建webpack.config.js
module.exports={
  entry:{
    main:'./main.js'
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env'],
            plugins:[['@babel/plugin-transform-react-jsx',{pragma:'createElement'}]] // 自定义设置pragma参数,我也可以设置为我的名字:maomin
          }
        }
      }
    ]
  },
  mode:'development',
  optimization:{
    minimize: false
  }
}
  1. 创建一个reactJsx.js文件
    此文件为主要逻辑文件。

。。。。。。。。。。。。。

作者:Vam的金豆之路

篇幅有限更多请见扩展链接:http://www.mark-to-win.com/tutorial/50838.html

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章