内容摘要：在开始开发之前，我们需要创建一个空项目文件夹。安装初始化npminit-y 2.安装webpack相关依赖npminstallwebpackwebpack-cli-D 3.

 在开始开发之前，原理我们需要创建一个空项目文件夹。关键

安装

初始化

npm init -y 

2.安装webpack相关依赖

npm install webpack webpack-cli -D 

3.安装babel-loader相关依赖

npm install babel-loader @babel/core @babel/preset-env -D 

4.安装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 

3.创建一个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);   } } // 封装插入文本节点 class TextWrapper {   constructor(content) {     this.root = document.createTextNode(content);   } } // 组件 export class Component {   constructor() {     this.props = Object.create(null); // 创建一个原型为null的空对象     this.children = [];     this._root = null;   }   setAttribute(name, value) {     this.props[name] = value;   }   appendChild(component) {     this.children.push(component);   }   get root() { // 取值     if (!this._root) {       this._root = this.render().root;     }     return this._root;   } } // 创建节点，createElement对照 webapck.config.js 中pragma参数。亿华云计算原理 export function createElement(type,关键 attributes, ...children) {   let e;   if (typeof type === "string") {     e = new ElementWrapper(type);   } else {     e = new type();   }   for (let p in attributes) { // 循环属性     e.setAttribute(p, attributes[p]);   }   let insertChildren = (children) => {     for (let child of children) {       if (typeof child === "string") {         child = new TextWrapper(child);       }       if (typeof child === "object" && child instanceof Array) {         insertChildren(child); // 递归       } else {         e.appendChild(child);       }     }   };   insertChildren(children);   return e; } // 添加到Dom中 export function render(component, parentElement) {   parentElement.appendChild(component.root); } 

main.js

import {createElement,Component,render} from ./reactJsx.jsclass MyComponent extends Component { render(){ return

maomin

import {createElement,Component,render} from ./reactJsx.js class MyComponent extends Component {   render(){     return <div>       <h1>maomin</h1>       {this.children}     </div>   } } render(<MyComponent id="name" class="age">   <div>xqm</div>   <div>my girlfriend</div> </MyComponent>,document.body)  执行npx webpack 

在dist文件夹下创建html文件，然后引入main.js，实现打开html文件就可以看到效果了。原理

关键

关键b2b供应网