Before starting development, we need to create an empty project folder.

The installation

  1. Initialize the
npm init -y
Copy the code

2. Install webPack-related dependencies

npm install webpack webpack-cli -D
Copy the code
  1. Install babel-loader dependencies
npm install babel-loader @babel/core @babel/preset-env -D
Copy the code
  1. Install JSX support dependencies
npm install @babel/plugin-transform-react-jsx -D
Copy the code

configuration

  1. Create the main.js file in the root directory

This file is an entry file.

  1. Create webpack.config.js in the project root directory
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'}]] // Custom set pragma parameter, I can also set to my name: maomin}}}]},mode:'development'.optimization: {minimize: false}}Copy the code
  1. Create a reactjsx.js file

This file is the primary logical file.

The development of

reactJsx.js

// Encapsulate the creation of a Dom node
class ElementWrapper {
  constructor(type) {
    this.root = document.createElement(type);
  }
  setAttibute(name, value) {
    this.root.setAttibute(name, value);
  }
  appendChild(component) {
    this.root.appendChild(component.root); }}// Encapsulate insert text node
class TextWrapper {
  constructor(content) {
    this.root = document.createTextNode(content); }}/ / component
export class Component {
  constructor() {
    this.props = Object.create(null); // Create an empty object whose prototype is null
    this.children = [];
    this._root = null;
  }
  setAttribute(name, value) {
    this.props[name] = value;
  }
  appendChild(component) {
    this.children.push(component);
  }
  get root() { / / value
    if (!this._root) {
      this._root = this.render().root;
    }
    return this._root; }}// Create a node with createElement following the pragma parameter in webapck.config.js.
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) { // Loop properties
    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); / / recursion
      } else{ e.appendChild(child); }}}; insertChildren(children);return e;
}

// Add to Dom
export function render(component, parentElement) {
  parentElement.appendChild(component.root);
}

Copy the code

main.js

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)
Copy the code

perform

npx webpack
Copy the code

Create an HTML file in the dist folder, import main.js, and open the HTML file to see the effect.

  • Welcome to pay attention to my public number front end experience robbed road

  • Reply keywords e-books, you can get 12 front-end popular e-books.

  • Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

  • After following the official account, click the menu below to add my wechat. I have attracted many IT bigwigs and created a technical exchange and article sharing group. I look forward to your joining.

  • Author: Vam’s Golden Bean Road

  • Wechat public number: the front end of the road through robbery

​