[[354631]]

 在開始開發之前，我們需要創建一個空項目文件夾。

安裝

初始化

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

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文件就可以看到效果了。