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

• Imperative (How) vs Declarative (What)
• Composition, Explicit Mutations (use setState)
• React Router
• Webpack
• Babel
• Axios

---

• npm init
• npm install --save react react-dom
• npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core, loader} babel-preset-react
• mkdir -p app && cd app
• touch index.html
• webpack.config.js
  • entry, output, module -> loaders, plugins -> HTMLwebpackconfigplugin
• .babelrc => { "preset" : [ "react" ]}
• package.json => scripts => {production => "webpack -p", "start" : "webpack-dev-server"}
  • npm run production

---

• Pure Functions
  • slice (no array modified) , splice

var React = require("react")
var ReactDom = require("react-dom")

var HelloWorld = React.createClass({
  render: function() {
    // console.log(this.props)
    return(
      <div>
        Hello World !
      </div>
    )
  }
})

ReactDom.render(<HelloWorld />, document.getElementById('app'))

fn(data) = view

{} => Single curly braces is data to interpolate
{{}} => Duble curly braces is object interpolated

wrap returned value in render, using div or another component

F = Focussed
I = Independent
R = Reusable
S = Small
T = Testable

---

{this.props.children}

• npm install --save react-router
• mkdir -p app/config && cd app/config && touch routes.js

var React = require("react")
var ReactDom = require("react-dom")

var ReactRouter = require("react-router")
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
// Define Route using ReactRouter
<Router history={hashHistory}>
  <Route path="/" component={Main}>
    <IndexRoute component={Home} />
    <Route path="/home" component={Home} />
  </Route>
</Router>

ReactDom.render(routes, document.getElementById('app'))

---

• mkdir -p app/components
• mkdir -p app/containers

// Add props to Route like normal component

{this.props.route.header}

• mkdir -p styles && cd styles && touch index.js
  // Add styles as object

getInitialState: function({username: ''});

onChange function sync with value

this.setState({username: e.target.value}

this.props.routeParams.playerOne // playerOne coming from route

contextTypes: {
router: React.PropTypes.object.isRequired
}

this.context.router.push({
pathName: '/battle',
query: {
playerOne: this.props.routerParams.playerOne,
playerTwo: this.state.username
}
})

separate container from ui components

propTypes: {
header: React.PropTypes.string.isRequired
}

// funtion stateless component
// Add properties on functions as properties

• 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

---