JS is always hot

• 2012-Backbone is so hot
• 2014-Angular is so hot
• 2015-React is so hot

Why React?

• Fast
• Pluggable
• Virtual DOM
• JSX
• Isomorphic Rendering
• Unidirectional Flow

Virtual DOM

• Compare DOM's current state to desired new state
• Update the DOM in the most efficient way
• Synthetic Events
• Isomorphic Support
• React Native

JSX

• "HTML" in JavaScript
• Differences: className, htmlFor
• Compiles to JavaScript
• Inline style can be good
• Optional

Why JSX

• Angular, Ember, knockout uses "JS" in HTML
• <div ng-repeat ="user in users">
• {{#each user in users}}
• HTML doesn't tell typo in HTML
• JS will throws error in the line it happens

Let's Check it out

One step at a time

• First step - absolute beginners
• Second step - small app
• Third step - grid and charts
• Fourth step - large app

Try it out

Grid & Charts

React Grid Libraries

• griddle
• react-datagrid

Life cycle methods

• componentWillMount
• componentDidMount
• componentWillRecieveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate
• compnentWillUnmount

Charts

React Router

• Complete routing library
• Simple api
• Lazy loading
• Dynamic route matching
• Location transition handling

Large application

Flux

• Architecture recommendation by facebook
• Uni directional data flow
• View, dispatcher, store, event emitter

Flux flow

Redux

Relay

Starter kit

React Dev tool

• Color coded Tree view
• Search
• Change state props

Unit Test

• Jest

Debug more

Need more?

• React Hot Reloader
• React cheat sheet
• react-motion
• React drag drop
• react performance
• react on server
• isomorphic react js