jsx.js

export default class Component {
  constructor(props){
    this.div = this.div.bind(this)
    this.form = this.form.bind(this)
    this.button = this.button.bind(this)
    this.a = this.a.bind(this)
    this.input = this.input.bind(this)
    this.refs = {}
    this.props = props || {};
  }
  div(){
    const args = [].slice.call(arguments);
    return this.createElement('div', ...args)
  }
  form(){
    const args = [].slice.call(arguments);
    return this.createElement('form', ...args)
  }
  button(){
    const args = [].slice.call(arguments);
    return this.createElement('button', ...args)
  }
  a(){
    const args = [].slice.call(arguments);
    if(!args[0].href){
      args[0].href='#'
    }
    return this.createElement('a', ...args)
  }
  input(){
    const args = [].slice.call(arguments);
    return this.createElement('input', ...args)
  }
  createElement(){
    const args = [].slice.call(arguments);
    const el = document.createElement(args[0])
    const attrs = args[1]
    Object.keys(attrs).forEach((attr)=>{
      if(attr == "ref"){
        this.refs[attrs[attr]] = el
      }else{
        el[attr] = attrs[attr]
      }
    })
    args.slice(2, args.length).forEach((arg)=>{
      switch(typeof arg){
        case 'string':
          el.appendChild(
            document.createTextNode(arg)
          )
          break;
        case 'object':
          el.appendChild(arg)
          break;
      }
    })
    return el;
  }
  static render(props){
    const component = new this(props)
    return component.render();
  }
  static renderTo(target, props){
    let _target = target
    if(typeof target == 'string'){
      _target = document.querySelector(target)
    }

    _target.innerHTML = ''
    const component = this.render(props)
    _target.appendChild(component)
  }
}

Login.js

class Login extends Component {
  constructor(props){
    super(props)
    this.handleSignup = this.handleSignup.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleSignup(e){
    e.preventDefault()

    this.props.onSignup()
  }
  handleSubmit(e){
    e.preventDefault()
    this.props.onIdentities({identities: ["Carson", "John"]})
  }
  render(){
    const {div, form, input, button, a} = this;
    
    return div({}, TopBar({}),
      form({id: 'login', onsubmit: this.handleSubmit}, 
        div({}, "Login"),
        div({className: "form-control"}, 
          input({
            type: "email",
            name: "email",
            placeholder:"johndoe@example.com"
          })
        ),
        div({className: "form-control"}, 
          input({
            type: "password",
            name: "password",
            placeholder:"**********"
          })
        ),
        div({className: "form-control"}, 
          button({}, "login")
        ),
        a({onclick: this.handleSignup}, "signup")
      ),
    )
  }
}
export default Login;