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

站在用户的角度思考问题，与客户深入沟通，找到莫力达网站设计与莫力达网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖莫力达地区。

安装

初始化

 
 
 
 

  
  
  
  
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.js'class MyComponent extends Component { render(){ return

maomin

  
 
 
 

   
  
  
  
import {createElement,Component,render} from './reactJsx.js'
   
  
  
  

   
  
  
  
class MyComponent extends Component {
   
  
  
  
  render(){
   
  
  
  
    return 

   
  
  
  
      
maomin
   
  
  
  
      {this.children}