The document is a pragmatic introduction to React by Maayan Glikser, focusing on component-driven development and key concepts like JSX, props, state, and lifecycle methods. It covers component creation, updates, and unmounting procedures, drawing parallels between React and Angular frameworks. Additionally, it mentions various flux implementations and provides a link to a related blog.

1. PRAGMATIC
INTRODUCTION
TO REACT
Maayan Glikser

2. Maayan Glikser
- Github addict
- Hardcore metal fan
- Converted from dogs to cats
Front End Developer @ 500Tech

3. ReactJS

4. Component Driven Development

5. Thinking in components

6. Thinking in components

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

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

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

10. PROPS & STATE

11. Lifecycle methods
Mount
componentWillMount → Angular PreLink
componentDidMount → Angular PostLink
Update
componentWillUpdate
componentDidUpdate
Unmount
componentWillUnmount → $scope.$on('destroy')

12. DEMO

13. Flux

14. Flux
Flummox
Fluxible
Marty.js
NuclearJS
Redux
Lux.js
Reflux
Alt.js

15. Read our blog:
http://blog.500tech.com
Maayan Glikser
maayan@500tech.com