spoike

ReactJS Component Cheatsheet

To create a ReactComponent:

ReactComponent React.createClass(object proto)

Basic JSX example:

var TitleComponent = React.createClass({

// REQUIRED

spoike

(function() {
    var defaultFrameRate = 20, // fps lock for old browsers
        // This is the default fallback throttle function
        framerateThrottle = function(callback) {
            return _.throttle(callback, 1 / (defaultFrameRate * 1000));
        };

    // Feature detection - should have requestAnimationFrame
    if (window.requestAnimationFrame) {
        framerateThrottle = function(callback) {

spoike

// Here is a quick tutorial on how to create a functor, an object that acts
// both as function and an object of functions (e.g. much like jQuery's globally 
// available $ object)

// This is a factory method that creates the functor for us:
function createFunctor() {
  
  // Declared variables are scoped within the createFunctor function
  // so they are practically private:
  var name = 'World';

spoike

var PostsApi = require('webapi/posts'), 
        // assuming the api object from the jsbin snippet
    Reflux = require('reflux');

var PostActions = createActions(["load", "loadError"]);
        // load action is invoked either from:
        // * top most component's componentDidMount 
        //   function in your application, or
        // * window.onLoad
        // I prefer the first strategy because that'll

spoike

function gch() {
	local currentBranch=$(git rev-parse --abbrev-ref HEAD)
	local previousFile="$(git rev-parse --show-toplevel)/.git/PREVIOUS_HEAD"
	if [ -n "$1" ]; then
		echo "$currentBranch" >> $previousFile
		git checkout "$@"
	else
		if [ ! -f "$previousFile" ]; then echo >&2 "ERROR: Missing PREVIOUS_HEAD. Please run gch with 1 argument first."
		else
			git checkout "$(cat $previousFile | tail --lines=1)"

spoike

#
# A minimal emoji theme.
#
# Authors:
#   Mikael Brassman
#
# Features:
#   - Displays a random emoji as prompt
#
# Usage:

spoike

/** @jsx React.DOM */
var React = require('react'),
    Reflux = require('reflux'),
    toggle = Reflux.createAction(),
    userStore = Reflux.createStore({
      init: function() {
        this.notify = false;
        this.listenTo(toggle, this.onToggle);
      },
      onToggle: function(flag) {

spoike

<snippet>
    <content><![CDATA[define([${1}], function(${2}) {
    ${0}
});]]></content>
    <tabTrigger>def</tabTrigger>
    <scope>source.js</scope>
    <description>Adds an RequireJS/AMD define block</description>
</snippet>

spoike

{
  "d": [
    {
      "name": "Squishy",
      "url": "http://spoike.github.io/html5-game/"
    },
    {
      "name": "Minesweeper",
      "url": "http://spoike.github.io/minesweeper/"
    },

spoike

var toAsciiIndex = function(str) {
  var i, carr = [], curr;
  for(i = 0; i < str.length; i++) {
    curr = str.charCodeAt(i);
    carr.push([curr%32, Math.floor(curr/32)]);
  }
  return carr;
};

toAsciiIndex("Hah"); // -> [[8,2],[1,3],[8,3]]