- src
- app.jsx
- routes.jsx
- components
- App-wide reusable components
- views
- One folder per view
- login
- index.jsx
- components
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 |
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
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": "", |