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

React Vs AnagularJS

Embed Size (px)

Citation preview

ReactJS vs/(and?) AngularBehind the code..

Agenda

You know angular

What is React ?Why React ?What’s in it ?

Why Frameworks ?

Only one reason

Predictability

Application Architecture

Angular - MVVMReact - FLUX

MVVM

FLUX

FLUX for React

Angular Vs React

Angular React

ControllerDirectiveServiceFactoryProviderModule.config.runbootstrap

Component

Understanding React

JSXReact ComponentState and PropsMixinsReact Virtual DOM

JSXJavascript Syntax Extension that looks like XML

NameSpacing

React Component

Virtual DOMReact.createElement(‘div’) - type,props,ref,keyrefsReact.findDOMNode

e.g. React.findDOMNode(this.refs.myinput).focus()

React Component Methods

render()

getInitialState()

getDefaultProps()

propTypes:{}

mixins:[]

statics:{}

componentWillMount()

componentDidMount()

componentWillRecieveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

componentWillUnmount()

Form<input>,<textarea>,<option>,<select>Controlled vs Uncontrolledinput[type=text|password|date|email],textarea,select : valueinput[type=checkbox|radio]:checkedoption:selected

Validation .. ?

Event SystemSyntheticEvent <wrapper>nativeEvent</wrapper>onClick,onChange,onInputonTouchStart,onTouchEndonFocus,onBluronKeyDown,onKeyPress

Few more thingspropTypesrefs ( referencing dom elements)React.renderReact.createElementReact.DOM.[div,ul,...]this.props.children(like angular transclude)React.addonstwo-way bindingPerformance Tools

Still to Explore

Server side renderingUnit testing with ReactAnimationReact.addonsVariations for ES6