tomcask

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

tomcask

callLog = [];

/* set up an override for the Function call prototype
 * @param func the new function wrapper
 */
function registerOverride(func) {
   oldCall = Function.prototype.call;
   Function.prototype.call = func;
}

tomcask

Monitor events by ID:

monitorEvents(document.getElementById('id'))

Monitor events by class:

monitorEvents(document.querySelector('.class'))

tomcask

// === Arrays

var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2


// Use from functions, only select from pattern
var foo = () => [1, 2, 3];

tomcask

// default exports
export default 42;
export default {};
export default [];
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

tomcask

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class

React Elements

tomcask

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

tomcask

[mergetool]
    prompt = false
    keepBackup = false
    keepTemporaries = false

[merge]
    tool = winmerge

[mergetool "winmerge"]
    name = WinMerge

tomcask

This script scans your Dropbox (or any given folder) for folders stored in the ignore array and excludes them from syncing. Makes use of the official Dropbox CLI

I'm a beginner at bash, so all improvements are welcome!

#!/bin/bash

set -e

# SETTINGS