choonkending

import React from 'react';   

const showHide = (Title, Content) => class extends React.Component {   
  constructor(props) {   
    super(props);   
    this.state = { isActive: false };   
    this.onToggle = this.onToggle.bind(this);   
  }   

  render() {   

choonkending

import React from 'react';   

const toggle = (ComposedComponent) => class extends React.Component {   
  constructor(props) {   
    super(props);   
    this.state = { isActive: false };   
    this.onToggle = this.onToggle.bind(this);   
  }   

  render() {   

choonkending

import React, { Component, PropTypes } from 'react';   

export default class Toggle extends Component {   
  constructor(props) {   
    super(props);   
    this.state = { isActive: false };   
    this.onToggle = this.onToggle.bind(this);   
  }   

  render() {   

choonkending

/*
 * Comparing arrow functions' lexical this binding to ordinary functions
 */
function Dog() {
   // The arrow function binds this to the new Dog instance
   // It is the same as writing it as 
   // const doSomething = function() { this.bark(); }.bind(this);
   const doSomething = () => { this.bark() };
   doSomething();
}

choonkending

button.addEventListener('click', function(e) {
  // Something
}.bind(this));

button.addEventListener('click', e => {
  // Something
});

class ViewModel {
  constructor(prop1, prop2) {

choonkending

// https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md
/*
 * Called with new? Use the newly constructed object
 */
class Pokemon {
  constructor(hp, mp) {
    this.hp = hp;
    this.mp = mp;
  } 
}

choonkending

/*
 * Backbone view
 */
var View = Backbone.View.extend({
  modifyDOM: function() {
    this.$el.html(this.template(obj));
  },
  
  render: function() {
    this.$el.html(this.template(obj));

choonkending

/* Start with building the component */
import React from 'react';

class Value extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false };
    this.onToggle = this.onToggle.bind(this);
  }
  

choonkending

/* Modal */
<div className="modal">
  <CloseButton />
</div>

/* CloseButton */
<button className="close-button">Close</button>

choonkending

const createEventHandlers = (el = document, eventName, handler) => ({
  add: () => { el.addEventListener(eventName, handler); },
  remove: () => { el.removeEventListener(eventName, handler); }
});


/*
 * In component
 */