| // connect() is a function that injects Redux-related props into your component. | |
| // You can inject data and callbacks that change that data by dispatching actions. | |
| function connect(mapStateToProps, mapDispatchToProps) { | |
| // It lets us inject component as the last step so people can use it as a decorator. | |
| // Generally you don't need to worry about it. | |
| return function (WrappedComponent) { | |
| // It returns a component | |
| return class extends React.Component { | |
| render() { | |
| return ( |
Note: < i=OS 5.1 use
prefs:. > 5.1 useapp-settings:
| // ------------ | |
| // counterStore.js | |
| // ------------ | |
| import { | |
| INCREMENT_COUNTER, | |
| DECREMENT_COUNTER | |
| } from '../constants/ActionTypes'; | |
| const initialState = { counter: 0 }; |
| // UPD: | |
| // Now available as npm module! | |
| // Check out https://github.com/RReverser/better-log for details. | |
| console.log = (function (log, inspect) { | |
| return function () { | |
| return log.apply(this, Array.prototype.map.call(arguments, function (arg) { | |
| return inspect(arg, { depth: 1, colors: true }); | |
| })); | |
| }; |
| [alias] | |
| co = checkout | |
| s = status | |
| b = branch | |
| a = add | |
| c = commit | |
| d = diff --ignore-space-at-eol --ignore-blank-lines | |
| ec = config --global -e | |
| up = !git pull --prune $@ && git submodule update --init --recursive | |
| cob = checkout -b |
| dragStart: function(e) { | |
| this.setState({dragMouseStart: e.clientY, draggingElementId: e.currentTarget.getAttribute('data-slug')}) | |
| e.dataTransfer.effectAllowed = 'move'; | |
| }, | |
| dragOver: function(e) { | |
| e.preventDefault(); | |
| var over = e.currentTarget; // element we're hovering over | |
| var draggingId = this.state.draggingElementId; | |
| var toElId = over.getAttribute('data-slug'); |
| //... | |
| Model.add({ | |
| content: { | |
| type: Types.Html, wysiwyg: true, height: 400 | |
| }, | |
| hash : { | |
| type : String, | |
| hidden : true | |
| }, |
I had a client who I built a site for (ecommerce) that had a lot of high resolution images. (running about 500gb/mo). Cloudinary charges $500/mo for this usage and Amazon charges about $40. I wrote some middleware that I used to wrap my cloudinary urls with in order to enable caching. This is entirely transparent and still enables you to use all the cool cloudinary effect and resizing functions. Hopefully this is useful to someone!
I think using deasync() here is janky but I couldn't think of another way to do it that allowed for quite as easy a fix.
| /* Load Zepto as module */ | |
| module.exports = { | |
| entry: "./app.js", | |
| output: { | |
| path: __dirname, | |
| filename: "bundle.js" | |
| }, | |
| module: { | |
| loaders: [ | |
| { test: /zepto(\.min)?\.js$/, loader: "exports?Zepto; delete window.$; delete window.Zepto;" }, |
The basic structure of a React+Flux application (see other examples)
- /src/actions/AppActions.js - Action creators (Flux)
- /src/components/Application.js - The top-level React component
- /src/constants/ActionTypes.js - Action types (Flux)
- /src/core/Dispatcher.js - Dispatcher (Flux)
- /src/stores/AppStore.js - The main store (Flux)