react.md

#react talk for brooklynjs

##what is react

• javascript library for building user interfaces
• (should i talk about mvc here?)
• uses a virtual dom diff implementation -- essentially, when you React.createClass this class (say, Hero) will return some html -- very DOM-like. then when this component is rendered, React uses its virtual DOM (is it stores virtual DOM) to figure out where it needs to insert this new html in order to make the virtual DOM === real DOM
• one-way data flow -- essentially, React classes have props -- which are like pieces of data. these props are passed down from one component to the next, the goal being a) it's easier to follow the data flow b) keeps things modular c) fast -> versus two-way data binding -> example

##the "react way"

• think in components! ideally, each component has a single responsibility. represent one piece of your data model.
• now that you've got your components, what is the hierarchy? which component renders the other component(s)? ..- in many ways, react is like a tree: there's a larger component that then calls other components who call other components etc etc. and these components are passing off data as they go

##how does it work

• react components take input data (this.props) and return what to display (render)
• react components can also maintain internal state data (data that changes over time) (this.state) -- when a component's state data changes, react component gets re-rendered
• state vs props: both types of "model" data but serve different purposes. props are a way of passing data from a parent to a child. state is reserved for interactivity, data that changes over time. (example?)
• events are passed from child to parent until they are handled, though ()[http://modernweb.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-22-at-15.30.40.png]
• try to keep as many of your components as stateless as possible. this will isolate state to its most logical place, minimize redundancy
• this is super useful if you want to update something on the page without rerendering the entire DOM -> example

###what's this jsx thing

• jsx is javascript xml syntax transform -- so, it lets you write javascript funciton calls with html
• if you're going to use it, you gotta add /** @jsx React.DOM */ at the beginning of your file -- you're saying 'hey JSX, i want you to process this file for React. tx <3 u'
• don't have to use it -- if you don't, you'll just be writing straight javascript in your render function at the end of React
• jsx has no notion of the dom -- it transforms elements into function calls, it's not actually interacting with the dom. -> example

##why should i use it

• dry
• modular
• sexy and single

##what is react NOT?

• not necessarily for modularizing html: you can modularize html much easier with things like hbs

##okay, give me an example

##things to look out for / tricky things

• add that jsx thing at the top!
• each return function just returns one dom element. so you can't return two divs -- just one
• listener events like onChange are often passed around b/t components -- be careful not unconsciously to override one. you can avoid this by having a local handleChange that then calls this.props.onChange (so you actually call both)
• remember that react is all about one-way data flow. a few times i'd try to pass something up the react tree but that's not how it works! pass it own down. down down.