key
is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:
- Clone state
<Comp key={1} /><Comp key={1} />
- Preserve component state across different parents:
import React, { Component } from 'react'; | |
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux'; | |
import { provide, connect } from 'react-redux'; | |
import thunk from 'redux-thunk'; | |
const AVAILABLE_SUBREDDITS = ['apple', 'pics']; | |
// ------------ | |
// reducers | |
// ------------ |
key
is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:
<Comp key={1} /><Comp key={1} />
// store.js | |
let {store, handler} = sto(initialState, reduceFn); // where reduceFn: function(currentState, action, ...args){} | |
dispatcher.register(handler); | |
export store; | |
// elsewhere | |
store.get() // -> current state | |
store.toObservable() // -> to be used with .observe() |
var React = require('react/addons'); | |
var ReactIgnore = { | |
displayName: 'ReactIgnore', | |
shouldComponentUpdate (){ | |
return false; | |
}, | |
render (){ | |
return React.Children.only(this.props.children); | |
} |
// in this first option events handlers are just RxJs functor Subject | |
// those subject are passed down to the render function and are manually injected into | |
// the properties of react component | |
var RxReact = require('rx-react'); | |
var React = require('react'); | |
// Usage example: | |
// | |
// willTransitionTo(transition, params, query, callback) { | |
// observeStore(DraftStore, s => s.isLoaded()).then(() => { | |
// if (DraftStore.isMissingTitle()) { | |
// transition.redirect('composeDraft', params); | |
// } | |
// }).finally(callback); | |
// } |
{ | |
"browser": true, | |
"node": true, | |
"curly": true, | |
"devel": true, | |
"globals": { | |
"ActiveXObject": true, | |
"async": true, | |
"moment": true, |
In React's terminology, there are five core types that are important to distinguish:
React Elements
'use strict'; | |
var React = require('react'), | |
classSet = require('react/lib/cx'), | |
_ = require('underscore'); | |
var ClassNameMixin = { | |
propTypes: { | |
className: React.PropTypes.string, | |
context: React.PropTypes.string |
It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.
We used to have a helper function called transferPropsTo
. We no longer support this method. Instead you're expected to use a generic object helper to merge props.
render() {
return Component(Object.assign({}, this.props, { more: 'values' }));