This document provides an overview of ReactJS and Angular, comparing their key features. It discusses their different architectural approaches, with Angular following MVVM and React following Flux. It also covers important React concepts like JSX, components, props, state, the virtual DOM, and React's event system. The document aims to help understand the core differences between these two popular frontend frameworks.

1. ReactJS vs/(and?) Angular
Behind the code..

2. Agenda
You know angular
What is React ?
Why React ?
What’s in it ?

3. Why Frameworks ?
Only one reason
Predictability

4. Application Architecture
Angular - MVVM
React - FLUX

5. MVVM

6. FLUX

7. FLUX for React

8. Angular Vs React
Angular React
Controller
Directive
Service
Factory
Provider
Module
.config
.run
bootstrap
Component

9. Understanding React
JSX
React Component
State and Props
Mixins
React Virtual DOM

10. JSX
Javascript Syntax Extension that looks like XML
NameSpacing

11. React
Component

12. Virtual DOM
React.createElement(‘div’) - type,props,ref,key
refs
React.findDOMNode
e.g. React.findDOMNode(this.refs.myinput).focus()

13. React Component Methods
render()
getInitialState()
getDefaultProps()
propTypes:{}
mixins:[]
statics:{}
componentWillMount()
componentDidMount()
componentWillRecieveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()

14. Form
<input>,<textarea>,<option>,<select>
Controlled vs Uncontrolled
input[type=text|password|date|email],textarea,select : value
input[type=checkbox|radio]:checked
option:selected
Validation .. ?

15. Event System
SyntheticEvent <wrapper>nativeEvent</wrapper>
onClick,onChange,onInput
onTouchStart,onTouchEnd
onFocus,onBlur
onKeyDown,onKeyPress

16. Few more things
propTypes
refs ( referencing dom elements)
React.render
React.createElement
React.DOM.[div,ul,...]
this.props.children(like angular transclude)
React.addons
two-way binding
Performance Tools

17. Still to Explore
Server side rendering
Unit testing with React
Animation
React.addons
Variations for ES6