Instantly share code, notes, and snippets.

View react-inline-styles.md

Rendering a style update

  1. Unset previous props.

Iterate over lastStyle and copy keys into styleUpdates with empty string as a value in order to "unset" them when they are missing in the next style version.

  1. Find modified props.

Iterate over new style and copy modified keys only into styleUpdates.

View action-creator-vs-reducer.md

When should you use action creator and when reducer?

Action creator

  • you need to have side effects
  • you need to read from store to decide what to do
  • you need to dispatch more than one action
  • action produced by action creator needs to contain all the data reducer can need to shape the components state

Reducer

  • should not have any side effects
View jss-es6-example-1.js
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
View decorated-component.js
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
View Section.js
'use strict'
import React from 'react'
import useSheet from 'react-jss'
import sectionStyle from './sectionStyle'
import Item from './Item'
/**
* One list section which has a title and list items.
*/
View fastClickSurfacePatch.js
define(function(require, exports, module) {
var Surface = require('famous/core/Surface')
// https://github.com/Famous/core/issues/37
Surface.prototype.emit = function(type, event) {
if (event && !event.origin) event.origin = this;
return this.eventHandler.emit(type, event);
}
})
View BaseTransition.js
define(function(require, exports, module) {
'use strict'
var CachedMap = require('famous/transitions/CachedMap')
var Transform = require('famous/core/Transform')
var _ = require('underscore')
function BaseTransition(options) {
var o = this.options = _.extend({}, this.constructor.DEFAULT_OPTIONS, options)
var spec = this.spec = {}
View app.js
exports.ready = new Promise(function(fulfill, reject) {
var isResized, isDomReady
var isDeviceReady = !window.cordova
context.on('resize', function() {
isResized = true
resolve()
})
domready(function() {
View SomeView.js
SomeView.prototype.show = function() {
var prevAnimation = {
transition: {},
transform: {}
}
var thisAnimation = {
transition: {},
transform: {}
}
View structure.md

app

  1. lib (app unspecific, installed from bower, npm or component) - lib1
  2. src (app specific) - screens (take components and build screens)
    • screen1
      • models
        • Model1.js
      • views
        • View1.js