Carl Vitullo vcarl

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

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

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

	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.

	{
	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);
	}

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

	// To use:

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


	// 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

	define (require) ->
	_ = require('lodash')
	React = require('react')
	ReactDOM = require('react-dom')

	# Modified from http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
	isElementInViewport = (el) ->
	rect = el.getBoundingClientRect();

	(

	{
	"name": "jstest",
	"version": "1.0.0",
	"description": "",
	"main": "src/index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "",