在开始开发之前,我们需要创建一个空项目文件夹。
安装
初始化
npm init -y
2.安装webpack相关依赖
npm install webpack webpack-cli -D
安装babel-loader相关依赖
npm install babel-loader @babel/core @babel/preset-env -D
安装jsx支持依赖
npm install @babel/plugin-transform-react-jsx -D
配置
在根目录下创建main.js文件
此文件为入口文件。
在项目根目录下创建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
}
}
创建一个reactJsx.js文件
此文件为主要逻辑文件。
开发
reactJsx.js
// 封装创建Dom节点
class ElementWrapper {
constructor(type) {
this.root = document.createElement(type);
}
setAttibute(name, value) {
this.root.setAttibute(name, value);
}
appendChild(component) {
this.root.appendChild(component.root);
}
}