vcarl

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

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mo7f1h57v

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

vcarl

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']

vcarl

	// 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.mobile.jpg', 'hero.tablet.jpg', or hero.desktop.jpg'
	$(function() {
		var getSize = function() {
			return window

vcarl

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: {

vcarl

change: function(field) {
  return function(event) {
    state = {};
    state[field] = event.target.value;
    this.setState(state);
  }.bind(this)
}

// To use:

vcarl

• src
  • app.jsx
  • routes.jsx
  • components
    • App-wide reusable components
  • views
    • One folder per view
    • login
      • index.jsx
• components

vcarl

{
  init: function(elevators, floors) {
    setTimeout(function(){
      window.queue = [];

      function removeIfInQueue(floor) {
        window.queue.forEach(function(val, index) {
          if (val.floor === floor) {
            window.queue.splice(index, 1);
          }

vcarl

	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.