React References studied

react-references.md

• ReactJS Awesome Free Course
• Redux Understanding
• Cartoon Intro to Redux
• Cartoon Guide to Flux
• Phoenix, React, Redux example
• Publishing Model Changes to a Phoenix Channel
• Using GenEvent to Notify a Channel of Updates in Elixir

Some Nuisances

• index_bundle.js:11089 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ForecastUI. See https://fb.me/react-warning-keys for more information.
  • http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Might be handy with Rails

https://www.viget.com/articles/gemify-your-client-side-app-for-rails

• componentDidMount, componentWillMount, getInitialState, componentWillReceiveProps, componentWillUnMount
• this.props.location.query

---

axios.get()
axios.all(players.map(function(username){
return getUserInfo(username)
})).then(function(info) {
return info.map(function(user){
user.data
})
}).catch(function(err) {
// console.log(err)
})

bind(this) // sets the context of function

function puke(obj) {
return

{JSON.stringify(obj, null, ' ')}

}

---

// Implicit Binding => Left of dot at call time
// Explicit Binding => sayName.call(stacey, arg1, arg2) , sayName.apply(stacey, array), var new_function = sayName.bind(stacey, arg1, arg2)
// bind is same as call but returns function instead of invoking function
// new Binding => create a new object and assign to this, this = {}
// window Binding => set property on window => window.age = 35
// 'use strict' rejects all window bindings and raises errors

---

this.context.router.push({
pathName: '/results',
state: {
playersInfo: this.state.playersInfo
}
})

user.info.name && // conditional check for rendering element

PropTypes.shape // for irregular data

this.props.location.state.playersInfo

getDefaultProps: function() {
return {
text: 'Loading',
speed: 300
}
}

---

• npm install --save react-addons-css-transition-group
• npm install --save-dev css-loader style-loader

{React.cloneElement(this.props.children, {key: this.props.location.pathname})}

ReactCSSTransitionGroup needs a key so use React.cloneElement

---