Skip to content

Instantly share code, notes, and snippets.


Carl Vitullo vcarl

  • Stellar Development Foundation
  • Nomadic
  • @vcarl_
View GitHub Profile
vcarl /
Last active Dec 14, 2015
How to learn React

Read "Smart and Dumb Components" by Dan Abramov (who later wrote Redux, a hugely popular variation on Facebook's Flux architecture).

In general, you need to make more components than you think you do. Facebook has over 15,000. Not only is more components not harmful to performance, by giving a lot of split points and more narrowly defining what data is needed to render, you can reduce how much DOM gets invalidated--which is a massive performance gain.

As of React 0.14.0, React supports stateless function components which are functions that take a props object as an argument and return as a render function. They have caveats though, like no lifecycle, state, or refs. So why use them? Because they encourage writing small, focused components t


you can't get around not cloning state, part of the point of redux is that object references don't get reused, so you can do oldstate === newstate and not have to do a deep comparison

only way to get that is by using a new object to get a new reference

not every property on the state object needs to be clone (e.g. it's a shallow clone) because each reducer either returns its previous state (so no clone) or a new object if there's been a change

so if you have 100 properties on the root state object and one key changes, oldstate !== newstate, but oldstate['unchangedKey'] === newstate['unchangedKey']

View responsive.js
// Responsive image handlers.
// By putting `data-filename` and `data-root` attributes on an `img`,
// different image sizes are pulled in automatically.
// e.g. <img data-filename='hero.jpg' data-root='/images/' />
// with media queries to set body:after's `content` to one of mobile, tablet, or desktop
// the `src` will be set to '', 'hero.tablet.jpg', or hero.desktop.jpg'
$(function() {
var getSize = function() {
return window
vcarl / auth.jsx
Last active Aug 29, 2015
Auth handling for a simple React applicatoin
View auth.jsx
module.exports = (function() {
'use strict';
var React = require('react');
var Login = require('../components/login.jsx');
var { RouteHandler } = require('react-router');
var Actions = require('../actions/actions.js');
var Auth = React.createClass({
propTypes: {
View change.js
change: function(field) {
return function(event) {
state = {};
state[field] =;
// To use:
vcarl /
Created Apr 23, 2015
React Project folder structure
  • src
    • app.jsx
    • routes.jsx
    • components
      • App-wide reusable components
    • views
      • One folder per view
      • login
        • index.jsx
        • components
View elevators.js
init: function(elevators, floors) {
window.queue = [];
function removeIfInQueue(floor) {
window.queue.forEach(function(val, index) {
if (val.floor === floor) {
window.queue.splice(index, 1);
View _findIndexed
public $findMethods = array('indexed' => true);
* Similar to find('list'), but allows for multiple fields to be retrieved.
protected function _findIndexed($state, $query, $results = array()) {
if ($state === 'before') {
return $query;
if ($state == 'after') {
// Temporary array for returning data.