Isn't React that clear? Don't you fully understand how/why you should use it on your apps and why it gained all this attention? Do you want to learn the basics and to understand why it's so powerful? This coffee@DBG will explore how this library works and you will discover and understand its main concepts in details. At the end of this session you'll learn main concepts like Components, Virtual DOM, One-way data binding etc.  Components  JSX  Data for component  The component lifecycle  Component Methods  Component Breakdown

1. REACT.JS
RETHINKING UI DEVELOPMENT WITH JAVASCRIPT
Introduction

2. Agenda
Overview
Components
JSX
Data for component
The component lifecycle
Component Methods
Component Breakdown
React v0.14
Flux (Intro)

3. React: Overview

4. A powerful framework by FB

5. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework

6. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework

7. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
“The way we are able to figure this out is that React does
not manipulate the DOM unless it needs to.
It uses a fast, internal mock DOM to perform diffs and
computes the most efficient DOM mutation for you.”
- React Doc

8. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
var msg = 'Bad';
$userMsg.html( '<p>I love Breaking ' + msg );
var data = {
'user_id' : 13,
'user_name' : 'W.W',
'user_msg' : 'I am the one who knocks!'
};
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);

9. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
var msg = 'Bad';
$userMsg.html( '<p>I love Breaking ' + msg );
var data = {
'user_id' : 13,
'user_name' : 'W.W',
'user_msg' : 'I am the one who knocks!'
};
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);

10. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework

11. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework

12. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework

14. Components

15. Special functionality unit

16. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too

17. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too

18. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too

19. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too

20. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too

21. JSX

22. HTML inside of JS

23. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer

24. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer

25. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer

26. $chatList.append( '<li class="chat__msg-wrap"> <img class="chat__user-img" src="' +
getUserImg(data.user_id) + '"/> <span class="chat__user-name">' + data.user_name +
'</span> <span class="chat__user-msg">' + data.user_msg + '</span> </li>' );
$chatList.append(
'<li class="chat__msg-wrap">' +
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>' +
'<span class="chat__user-name">' + data.user_name + '</span>' +
'<span class="chat__user-msg">' + data.user_msg + '</span>' +
'</li>'
);
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);

27. $chatList.append( '<li class="chat__msg-wrap"> <img class="chat__user-img" src="' +
getUserImg(data.user_id) + '"/> <span class="chat__user-name">' + data.user_name +
'</span> <span class="chat__user-msg">' + data.user_msg + '</span> </li>' );
$chatList.append(
'<li class="chat__msg-wrap">' +
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>' +
'<span class="chat__user-name">' + data.user_name + '</span>' +
'<span class="chat__user-msg">' + data.user_msg + '</span>' +
'</li>'
);
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);

28. $chatList.append( '<li class="chat__msg-wrap"> <img class="chat__user-img" src="' +
getUserImg(data.user_id) + '"/> <span class="chat__user-name">' + data.user_name +
'</span> <span class="chat__user-msg">' + data.user_msg + '</span> </li>' );
$chatList.append(
'<li class="chat__msg-wrap">' +
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>' +
'<span class="chat__user-name">' + data.user_name + '</span>' +
'<span class="chat__user-msg">' + data.user_msg + '</span>' +
'</li>'
);
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);

29. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer

30. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer

31. Using JSX

32. var ExampleComponent = React.createClass({
render: function () {
return (
<div className="navigation">
Hello World!
</div>
);
}
});

33. var ExampleComponent = React.createClass({
render: function () {
return (
React.createElement('div', {className: 'navigation'},
'Hello World!')
);
}
});
❖ You don't have to use JSX
❖ Using className since class is a reserved word in Javascript
❖ JSX transforms the code, changes all the attributes on the node into an object

34. Using variables for attributes

35. var ExampleComponent = React.createClass({
render: function () {
var navigationClass = 'navigation';
return (
<div className={ navigationClass }>
Hello World!
</div>
);
}
});
❖ Dynamically change the class of a component
❖ Wrap it around a set of curly braces, so JSX knows that it is an external variable

36. The Initial Render

37. var ExampleComponent = React.createClass({
render: function () {
var navigationClass = 'navigation';
return (
<div className={ navigationClass }>
Hello World!
</div>
);
}
});
ReactDOM.render( <ExampleComponent />, document.body );
❖ Tell React which component to render, and point to an existing DOM node for where to render it

38. Data for component

39. Props and States

40. Props

41. ❖ Props is the data passed into a component
❖ Props is accessed via “this.props”
❖ Props is immutable, don’t change only use

42. ❖ Props is the data passed into a component
❖ Props is accessed via “this.props”
❖ Props is immutable, don’t change only use

43. ❖ Props is the data passed into a component
❖ Props is accessed via “this.props”
❖ Props is immutable, don’t change only use

44. ❖ Props is the data passed into a component
❖ Props is accessed via “this.props”
❖ Props is immutable, don’t change only use

45. var SayMyName = React.createClass({
render: function () {
return (
<div className="say-hello">
Hello { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

46. var SayMyName = React.createClass({
render: function () {
return (
<div className="say-hello">
Hello { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

47. var SayMyName = React.createClass({
render: function () {
return (
<div className="say-hello">
Hello { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

48. State

49. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

50. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

51. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

52. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

53. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

54. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI

55. var SayMyName = React.createClass({
getInitalState: function () {
return { greet: 'Hello' }
},
render: function () {
return (
<div className="say-hello">
{ this.state.greet } { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

56. var SayMyName = React.createClass({
getInitalState: function () {
return { greet: 'Hello' }
},
render: function () {
return (
<div className="say-hello">
{ this.state.greet } { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

57. var SayMyName = React.createClass({
getInitalState: function () {
return { greet: 'Hello' }
},
render: function () {
return (
<div className="say-hello">
{ this.state.greet } { this.props.name }
</div>
);
}
});
var myName = 'Heisenberg';
ReactDOM.render(<SayMyName name={ myName } />, document.body);

58. The component lifecycle

59. getInitialState
only called once, and is called as the component is
being mounted.

60. componentWillMount
As soon as your component is about to be mounted,
this is called.

61. var ExampleComponent = React.createClass({
componentWillMount: function () {
// hide any loading screens
// remove any placeholders
},
render: function () {
// this gets called many times in a components life
return (
<div>
Hello World!
</div>
);
}
});

62. componentDidMount
Once your component has ran the render function
and actually rendered your component in the DOM

63. var ExampleComponent = React.createClass({
componentDidMount: function () {
// render a chart on the DOM node
// bind events to window, like resize
},
render: function () {
return (
<div>
Hello World!
</div>
);
}
});

64. componentWillUnmount
If you were to remove the component from the
DOM, this function is called

65. var ExampleComponent = React.createClass({
componentWillUnmount: function () {
// unbind events to window, like resize
},
render: function () {
return (
<div>
Hello World!
</div>
);
}
});

66. Component Methods

67. getDefaultProps
Define the default values for the properties of the
component that we are expecting

68. var Navigation = React.createClass({
getDefaultProps: function () {
return {
nav: {}
}
},
render: function () {
return (
<ul className="navigation">...</ul>
);
}
});
ReactDOM.render( <Navigation nav={ navObj } />, $header );
ReactDOM.render( <Navigation />, $footer );

69. propTypes
Specify the type of each property we are expecting
for validation. Checked only in development mode.

70. var Navigation = React.createClass({
propTypes: {
nav : React.PropTypes.object,
data : React.PropTypes.array
},
render: function () {
return (
<ul className="navigation">...</ul>
);
}
});
ReactDOM.render( <Navigation nav={ navObj } />, $header );

71. mixins
So we don't have to write the same code twice

72. var ExampleMixin = {
componentDidMount: function () {
// bind resize event on window
},
componentWillUnmount: function () {
// unbind resize event from window
}
};
var ExampleComponent = React.createClass({
mixins: [ExampleMixin]
});
var AnotherComponent = React.createClass({
mixins: [ExampleMixin]
});

73. Loop de loop
Looping through data in array of objects

74. var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<li className="navigation__item">
<a className="navigation__link" href={ item.href }>
{ item.text }
</a>
</li>
);
});
return (
<ul className="navigation"> { items } </ul>
);
}
});
var navObj = [{
href: 'http://vijaydev.com',
text: 'My Website'
}];
ReactDOM.render( <Navigation nav={ navObj } />, $header );

75. var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<li className="navigation__item">
<a className="navigation__link" href={ item.href }>
{ item.text }
</a>
</li>
);
});
return (
<ul className="navigation"> { items } </ul>
);
}
});
var navObj = [{
href: 'http://vijaydev.com',
text: 'My Website'
}];
ReactDOM.render( <Navigation nav={ navObj } />, $header );

76. var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<li className="navigation__item">
<a className="navigation__link" href={ item.href }>
{ item.text }
</a>
</li>
);
});
return (
<ul className="navigation"> { items } </ul>
);
}
});
var navObj = [{
href: 'http://vijaydev.com',
text: 'My Website'
}];
ReactDOM.render( <Navigation nav={ navObj } />, $header );

77. var NavItem = React.createClass({
render: function () {
return (
<li className="navigation__item">
<a className="navigation__link" href={ this.props.href }>
{ this.props.text }
</a>
</li>
);
}
});
var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<NavItem href={ item.href } text={ item.text } />
);
});
return (
<ul className="navigation">{ items }</ul>
);
}
});

78. var NavItem = React.createClass({
render: function () {
return (
<li className="navigation__item">
<a className="navigation__link" href={ this.props.href }>
{ this.props.text }
</a>
</li>
);
}
});
var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<NavItem href={ item.href } text={ item.text } />
);
});
return (
<ul className="navigation">{ items }</ul>
);
}
});

79. var NavItem = React.createClass({
render: function () {
return (
<li className="navigation__item">
<a className="navigation__link" href={ this.props.href }>
{ this.props.text }
</a>
</li>
);
}
});
var Navigation = React.createClass({
render: function () {
var items = this.props.nav.map(function (item) {
return (
<NavItem href={ item.href } text={ item.text } />
);
});
return (
<ul className="navigation">{ items }</ul>
);
}
});

80. Component Breakdown

81. UI to reusable components
Case study: How to breakdown UI into various
reusable components

83. data = [{
'src' : '/path/to/image',
'alt' : 'alt text of image',
'title' : 'name of the movie',
'href' : '/path/to/the/movie/details/page',
'cast' : ['array', 'of', 'movie', 'casts'],
'rating' : 'movie rating',
'theater_href' : '/path/to/theater/list'
}, {
...
...
}, {
...
...
}];

84. props = [{
'src' : '/path/to/image',
'alt' : 'alt text of image',
'title' : 'name of the movie',
'href' : '/path/to/the/movie/details/page',
'cast' : ['array', 'of', 'movie', 'casts'],
'rating' : 'movie rating',
'theater_href' : '/path/to/theater/list'
}, {...}, {...}];
state = {
'actualData' : this.props,
'currWidth' : 'calculated current screen width',
'colCount' : 'based on currWidth & max column count',
'perPage' : 'based on currWidth & colCount',
'totalPages' : 'based on perPage & actualData length',
'currPageNo' : 'used in calculating pageData',
'pageData' : 'based on totalPages & currPageNo'
};

85. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );

86. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );
props = [{
'src' : '/path/to/image',
'alt' : 'alt text of image',
'title' : 'name of the movie',
'href' : '/path/to/the/movie/details/page',
'cast' : ['array', 'of', 'movie', 'casts'],
'rating' : 'movie rating',
'theater_href' : '/path/to/theater/list'
}, {...}, {...}];
state = {
'actualData' : this.props,
'currWidth' : 'calculated current screen width',
'colCount' : 'based on currWidth & max column count',
'perPage' : 'based on currWidth & colCount',
'totalPages' : 'based on perPage & actualData length',
'currPageNo' : 'used in calculating pageData',
'pageData' : 'based on totalPages & currPageNo'
};

87. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );

88. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );
props = [{
'src' : '/path/to/image',
'alt' : 'alt text of image',
'title' : 'name of the movie',
'href' : '/path/to/the/movie/details/page',
'cast' : ['array', 'of', 'movie', 'casts'],
'rating' : 'movie rating',
'theater_href' : '/path/to/theater/list'
}, {...}, {...}];
state = {
'actualData' : this.props,
'currWidth' : 'calculated current screen width',
'colCount' : 'based on currWidth & max column count',
'perPage' : 'based on currWidth & colCount',
'totalPages' : 'based on perPage & actualData length',
'currPageNo' : 'used in calculating pageData',
'pageData' : 'based on totalPages & currPageNo'
};

89. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );

90. <MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);
<MoviePosterContent>
<MoviePosterList data={ this.state.pageData }>
<PosterItem data={ pageData[i] }>
<PosterNameCasts data={ iSrc, iAlt, iTitle, iHref, iCast } />
<PosterRatingTheater data={ iRating, itheaterHref } />
</PosterItem>
</MoviePosterList>
<Navigation data={ this.state.totalPages, this.state.currPageNo } />
</MoviePosterContent>
ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );
props = [{
'src' : '/path/to/image',
'alt' : 'alt text of image',
'title' : 'name of the movie',
'href' : '/path/to/the/movie/details/page',
'cast' : ['array', 'of', 'movie', 'casts'],
'rating' : 'movie rating',
'theater_href' : '/path/to/theater/list'
}, {...}, {...}];
state = {
'actualData' : this.props,
'currWidth' : 'calculated current screen width',
'colCount' : 'based on currWidth & max column count',
'perPage' : 'based on currWidth & colCount',
'totalPages' : 'based on perPage & actualData length',
'currPageNo' : 'used in calculating pageData',
'pageData' : 'based on totalPages & currPageNo'
};

91. React v0.14

92. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

93. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

94. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
“This paves the way to writing components that can
be shared between the web version of React and
React Native. We don’t expect all the code in an app to
be shared, but we want to be able to share the
components that do behave the same across platforms.”
- React v0.14 release blog

95. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

96. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

97. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

98. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
“...it has become clear that the beauty and essence of
React has nothing to do with browsers or the DOM.”
- React v0.14 release blog

99. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);

100. Flux

102. pageData: [
{'Puthiya Niyamam', ...},
{'Maheshinte Prathikaaram', ...},
{'Action Hero Biju', ...},
{'Mastizaade', ...}
]
pageData: [
{'Pachakallam', ...},
{'Jalam', ...},
{'Airlift', ...},
{'Kya Kool Hai Hum', ...}
]

105. { type: 'NEXT_BTN_PRESS' }
{ type: 'PREV_BTN_PRESS' }
{
type: 'JUMP_TO_PAGE',
payload: {
'pageNo': 3
}
}
{
type: 'WINDOW_RESIZED',
payload: {
'newWidth': 600
}
}
{
type: 'ADD_TODO',
payload: {
text: 'Learn ES6'
}
}

106. { type: 'NEXT_BTN_PRESS' }
{ type: 'PREV_BTN_PRESS' }
{
type: 'JUMP_TO_PAGE',
payload: {
'pageNo': 3
}
}
{
type: 'WINDOW_RESIZED',
payload: {
'newWidth': 600
}
}
{
type: 'ADD_TODO',
payload: {
text: 'Learn ES6'
}
}

107. { type: 'NEXT_BTN_PRESS' }
{ type: 'PREV_BTN_PRESS' }
{
type: 'JUMP_TO_PAGE',
payload: {
'pageNo': 3
}
}
{
type: 'WINDOW_RESIZED',
payload: {
'newWidth': 600
}
}
{
type: 'ADD_TODO',
payload: {
text: 'Learn ES6'
}
}

109. Thank you

110. Vijay Dev
Lead Front-end Engineer
http://vijaydev.com/