在开始开发之前，我们需要创建一个空项目文件夹。 安装
代码语言：text复制初始化npm init -y
2.安装webpack相关依赖
npm install webpack webpack-cli -D
代码语言：text复制安装babel-loader相关依赖npm install babel-loader @babel/core @babel/preset-env -D
代码语言：text复制安装jsx支持依赖npm install @babel/plugin-transform-react-jsx -D
配置
代码语言：text复制在根目录下创建main.js文件
此文件为入口文件。
在项目根目录下创建webpack.config.jsmodule.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 } }
代码语言：text复制创建一个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); } }
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119882414
