内容摘要：在开始开发之前，我们需要创建一个空项目文件夹。安装初始化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文件就可以看到效果了。原理

关键

关键服务器托管