PRAGMATIC INTRODUCTION TO REACT

Maayan Glikser

Maayan Glikser

- Github addict - Hardcore metal fan - Converted from dogs to cats

Front End Developer @ 500Tech

ReactJS

Component Driven Development

Thinking in components

Thinking in components

JSX

`

let message = ( <div className="hello" onClick={ someFunc }> <span>Hello World</span> </div>);

Without JSX

`let message = React.DOM.div({ className: 'hello', onClick: someFunc },[ React.DOM.span(null, ['Hello World']) ]);

`

Basic Component

React.createClass({ render() { return <span>Hello World</span>; } });

PROPS & STATE

Lifecycle methods

Mount componentWillMount → Angular PreLink

componentDidMount → Angular PostLink

Update componentWillUpdate

componentDidUpdate

Unmount componentWillUnmount → $scope.$on('destroy')

DEMO

Flux

Flux

Flummox Fluxible Marty.js NuclearJS

Redux Lux.js Reflux Alt.js

Read our blog:http://blog.500tech.com

Maayan Gliksermaayan@500tech.com