reactExample.js

class React {
    static render(component, target){
        target.innerHTML = ''
        target.appendChild(component)

        this._attach = [
            component,
            target
        ]
    }
    
    static createElement(type, options = {}, ...children){
        const element = document.createElement(type)
        options = options || {}
        if(options.style) {
            for(let styling of Object.keys(options.style)){
                element.style[styling] = options.style[styling]
            }
        }
        if(options.className) element.className = options.className
        if(options.onClick) element.onclick = options.onClick
        if(options.onChange) element.onchange = options.onChange
        if(options.id) element.id = options.id
        if(options.value) element.value = options.value

        for(let child of children){
            if(['number', 'string'].includes(typeof child)){
                element.innerHTML = element.innerHTML + child
            }else if(child !== undefined){
                element.appendChild(child)
            }
        }
        return element
    }
}

class Component {
    setState(value){
        this.state = {
            ...this.state,
            ...value
        }
        React.render(this.render(), React._attach[1])
    }
}


class MyComponent extends Component {
    constructor() {
      super();
      this.state = {
        value: 0
      };
      this.handleUp = this.handleUp.bind(this);
      this.handleDown = this.handleDown.bind(this);
      this.handleNameChange = this.handleNameChange.bind(this);
    }
  
    handleUp() {
      this.setState({
        value: this.state.value + 1
      });
    }
  
    handleDown() {
      this.setState({
        value: this.state.value - 1
      });
    }
  
    handleNameChange(e) {
      this.setState({
        firstName: e.target.value
      });
    }
  
    render() {
      return React.createElement("div", {
        className: "theHello",
        style: {
          color: 'blue'
        }
      }, "Hello ", this.state.value, React.createElement("button", {
        onClick: this.handleUp
      }, "up"), React.createElement("button", {
        onClick: this.handleDown
      }, "down"), React.createElement("input", {
        onChange: this.handleNameChange,
        value: this.state.firstName
      }));
    }
  
  }
React.render((new MyComponent).render(), document.querySelector('#app'))

// React UI Source https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=JYWwDg9gTgLgBAbwMIXBAdgU3TAvnAMylTgHIpMBDAYxlICh7qAbSgZzbgFkBPFNLDjiYAHjGwATTv0iD4CenDjUMbGFACutaAAoAlAqVK2GsJij7FRmAAtgbAHRrK4uAF5EVo3ABulZhqYAFxwAAxecLgRtvYONpToEsyYAKpg7nAxjvGJyWkOAEbAiTpZetF22QlJmAAiEADu6BlZcdXJ9U2FxRKlleXerTk1AHKUIJhIOQDmmC2VbbmYYxNTCbPdJWVWUUrDeWD6htYLbJgwAMowLpg6x95-AcGZp9fiDo-BcADUcACMEVwA0iVn2dUa6COFViZ0ub1u9yMn2erWc72RcAAtP9AcDdnAwStJjNbpgDBEXjDzlcbncKUoCMAoGoiSFMA5rlBZjAPv5AhSgTsrBREuYod4KDANFBmgAeCTAHzKVgcIluUi2TAACUwzGYEFIcDUPGSbgQCBU-qgIVIBSepFwuAAfPSdXqIIhUfDeU98d5ZQUNDAYBg4BgkMxgNQANZmobtVJgZ2mWUAekDwYwLu8SgDQZDzXDkZjcYWYM66GdEghaYzBezOdlxTAQbD6DW6FmpdihPGxPWmHwyO7jjR7MZzJgRPwqYbudTCp8DaiuCAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react%2Cstage-2&prettier=false&targets=&version=7.5.5&externalPlugins=