SlideShare a Scribd company logo

REACT.JS : Rethinking UI Development Using JavaScript

Download as PPTX, PDF
••
Deepu S Nath, profile picture
Deepu S Nath

The document is an introductory guide to React.js, a powerful JavaScript framework developed by Facebook that implements a virtual DOM for efficient UI rendering. It provides an overview of React components, JSX syntax, state management, and component lifecycle methods. Key concepts like props, state, and component methods are also discussed, along with examples and best practices for using React.

Technology
Related topics:
The React JS Overview
1 of 110
Downloaded 27 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
REACT.JS RETHINKING UI DEVELOPMENT WITH JAVASCRIPT Introduction
Agenda Overview Components JSX Data for component The component lifecycle Component Methods Component Breakdown React v0.14 Flux (Intro)
React: Overview
A powerful framework by FB
❖ 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
❖ 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
❖ 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
❖ 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(); );
❖ 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(); );
❖ 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
❖ 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
❖ 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
REACT.JS : Rethinking UI Development Using JavaScript
Components
Special functionality unit
❖ 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
❖ 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
❖ 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
❖ 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
❖ 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
JSX
HTML inside of JS
❖ 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
❖ 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
❖ 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
$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(); );
$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(); );
$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(); );
❖ 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
❖ 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
Using JSX
var ExampleComponent = React.createClass({ render: function () { return ( <div className="navigation"> Hello World! </div> ); } });
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
Using variables for attributes
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
The Initial Render
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
Data for component
Props and States
Props
❖ Props is the data passed into a component ❖ Props is accessed via “this.props” ❖ Props is immutable, don’t change only use
❖ Props is the data passed into a component ❖ Props is accessed via “this.props” ❖ Props is immutable, don’t change only use
❖ Props is the data passed into a component ❖ Props is accessed via “this.props” ❖ Props is immutable, don’t change only use
❖ Props is the data passed into a component ❖ Props is accessed via “this.props” ❖ Props is immutable, don’t change only use
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);
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);
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);
State
❖ 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
❖ 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
❖ 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
❖ 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
❖ 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
❖ 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
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);
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);
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);
The component lifecycle
getInitialState only called once, and is called as the component is being mounted.
componentWillMount As soon as your component is about to be mounted, this is called.
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> ); } });
componentDidMount Once your component has ran the render function and actually rendered your component in the DOM
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> ); } });
componentWillUnmount If you were to remove the component from the DOM, this function is called
var ExampleComponent = React.createClass({ componentWillUnmount: function () { // unbind events to window, like resize }, render: function () { return ( <div> Hello World! </div> ); } });
Component Methods
getDefaultProps Define the default values for the properties of the component that we are expecting
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 );
propTypes Specify the type of each property we are expecting for validation. Checked only in development mode.
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 );
mixins So we don't have to write the same code twice
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] });
Loop de loop Looping through data in array of objects
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 );
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 );
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 );
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> ); } });
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> ); } });
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> ); } });
Component Breakdown
UI to reusable components Case study: How to breakdown UI into various reusable components
REACT.JS : Rethinking UI Development Using JavaScript
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' }, { ... ... }, { ... ... }];
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' };
<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 );
<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' };
<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 );
<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' };
<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 );
<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' };
React v0.14
❖ 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);
❖ 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);
❖ 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
❖ 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);
❖ 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);
❖ 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);
❖ 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
❖ 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);
Flux
REACT.JS : Rethinking UI Development Using JavaScript
pageData: [ {'Puthiya Niyamam', ...}, {'Maheshinte Prathikaaram', ...}, {'Action Hero Biju', ...}, {'Mastizaade', ...} ] pageData: [ {'Pachakallam', ...}, {'Jalam', ...}, {'Airlift', ...}, {'Kya Kool Hai Hum', ...} ]
REACT.JS : Rethinking UI Development Using JavaScript
REACT.JS : Rethinking UI Development Using JavaScript
{ 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' } }
{ 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' } }
{ 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' } }
REACT.JS : Rethinking UI Development Using JavaScript
Thank you
Vijay Dev Lead Front-end Engineer http://vijaydev.com/

More Related Content

PDF
An Introduction to ReactJS
All Things Open
 
PDF
React JS and why it's awesome
Andrew Hull
 
PDF
React for Dummies
Mitch Chen
 
PDF
ReactJS
Kamlesh Singh
 
PPTX
React + Redux Introduction
Nikolaus Graf
 
PDF
React.js in real world apps.
Emanuele DelBono
 
PDF
An introduction to React.js
Emanuele DelBono
 
PDF
React Lifecycle and Reconciliation
Zhihao Li
 
An Introduction to ReactJS
All Things Open
 
React JS and why it's awesome
Andrew Hull
 
React for Dummies
Mitch Chen
 
ReactJS
Kamlesh Singh
 
React + Redux Introduction
Nikolaus Graf
 
React.js in real world apps.
Emanuele DelBono
 
An introduction to React.js
Emanuele DelBono
 
React Lifecycle and Reconciliation
Zhihao Li
 

What's hot (20)

PPTX
React in Native Apps - Meetup React - 20150409
Minko3D
 
PPT
React js
Jai Santhosh
 
PDF
React.js or why DOM finally makes sense
Eldar Djafarov
 
PDF
React JS - Introduction
Sergey Romaneko
 
PDF
Let's Redux!
Joseph Chiang
 
PDF
React
중운 박
 
PPTX
ReactJs presentation
nishasowdri
 
PPTX
A Brief Introduction to React.js
Doug Neiner
 
PPTX
Better web apps with React and Redux
Ali Sa'o
 
PPTX
React & redux
Cédric Hartland
 
PDF
The Complementarity of React and Web Components
Andrew Rota
 
PPTX
Getting Started With ReactJS
Sandeep Kumar Patel
 
PDF
Laravel 8 export data as excel file with example
Katy Slemon
 
PDF
Why and How to Use Virtual DOM
Daiwei Lu
 
PPTX
React / Redux Architectures
Vinícius Ribeiro
 
PDF
React.js and Redux overview
Alex Bachuk
 
PPTX
Introduction to React JS
Arnold Asllani
 
PPTX
Introduction to React JS for beginners
Varun Raj
 
PPTX
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PPTX
Introduction to react_js
MicroPyramid .
 
React in Native Apps - Meetup React - 20150409
Minko3D
 
React js
Jai Santhosh
 
React.js or why DOM finally makes sense
Eldar Djafarov
 
React JS - Introduction
Sergey Romaneko
 
Let's Redux!
Joseph Chiang
 
React
중운 박
 
ReactJs presentation
nishasowdri
 
A Brief Introduction to React.js
Doug Neiner
 
Better web apps with React and Redux
Ali Sa'o
 
React & redux
Cédric Hartland
 
The Complementarity of React and Web Components
Andrew Rota
 
Getting Started With ReactJS
Sandeep Kumar Patel
 
Laravel 8 export data as excel file with example
Katy Slemon
 
Why and How to Use Virtual DOM
Daiwei Lu
 
React / Redux Architectures
Vinícius Ribeiro
 
React.js and Redux overview
Alex Bachuk
 
Introduction to React JS
Arnold Asllani
 
Introduction to React JS for beginners
Varun Raj
 
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Introduction to react_js
MicroPyramid .
 
Ad

Viewers also liked (19)

PDF
Introduction to ReactJS
Jarosław Jaryszew
 
PPTX
React basic by Yoav Amit, Wix
Chen Lerner
 
PDF
2016 SUTOL: React.js – High-Performance Client for Domino
Knut Herrmann
 
PPTX
Meap and business platforms
Deepu S Nath
 
PPTX
003. ReactJS basic
Binh Quan Duc
 
PDF
JSX - developing a statically-typed programming language for the Web
Kazuho Oku
 
PDF
What Makes Content Memorable?
Bruce Kasanoff
 
PDF
Activate Tech and Media Outlook 2016
Activate
 
PPTX
Tips, Tools and Templates To Build Your Content Marketing Strategy
Michael Brenner
 
PPTX
How To Plan And Build A Successful Content Marketing Strategy
Michael Brenner
 
PPTX
How to Choose the Perfect Stock Photo
IMPACT Branding & Design LLC
 
PDF
Work Rules!
Laszlo Bock
 
PPTX
Content Marketing Strategy Workshop
Michael Brenner
 
PDF
20 Facebook, Twitter, Linkedin & Pinterest Features You Didn't Know Existed (...
HubSpot
 
PDF
PSFK presents the Mobile Commerce Playbook
PSFK
 
PPTX
The Top 10 Facebook and Twitter Advertising Hacks of All Time - Larry Kim's P...
Internet Marketing Software - WordStream
 
PPTX
25 Disruptive Technology Trends 2015 - 2016
Brian Solis
 
PDF
The 10 Best Copywriting Formulas for Social Media Headlines
Buffer
 
PDF
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
Content Marketing Institute
 
Introduction to ReactJS
Jarosław Jaryszew
 
React basic by Yoav Amit, Wix
Chen Lerner
 
2016 SUTOL: React.js – High-Performance Client for Domino
Knut Herrmann
 
Meap and business platforms
Deepu S Nath
 
003. ReactJS basic
Binh Quan Duc
 
JSX - developing a statically-typed programming language for the Web
Kazuho Oku
 
What Makes Content Memorable?
Bruce Kasanoff
 
Activate Tech and Media Outlook 2016
Activate
 
Tips, Tools and Templates To Build Your Content Marketing Strategy
Michael Brenner
 
How To Plan And Build A Successful Content Marketing Strategy
Michael Brenner
 
How to Choose the Perfect Stock Photo
IMPACT Branding & Design LLC
 
Work Rules!
Laszlo Bock
 
Content Marketing Strategy Workshop
Michael Brenner
 
20 Facebook, Twitter, Linkedin & Pinterest Features You Didn't Know Existed (...
HubSpot
 
PSFK presents the Mobile Commerce Playbook
PSFK
 
The Top 10 Facebook and Twitter Advertising Hacks of All Time - Larry Kim's P...
Internet Marketing Software - WordStream
 
25 Disruptive Technology Trends 2015 - 2016
Brian Solis
 
The 10 Best Copywriting Formulas for Social Media Headlines
Buffer
 
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
Content Marketing Institute
 
Ad

Similar to REACT.JS : Rethinking UI Development Using JavaScript (20)

PDF
Web Components v1
Mike Wilcox
 
PDF
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
KEY
#NewMeetup Performance
Justin Cataldo
 
PDF
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
PDF
Webpack
Sofian Hadiwijaya
 
PDF
Integrating React.js Into a PHP Application
Andrew Rota
 
PDF
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
PDF
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
tdc-globalcode
 
PDF
Performance Optimization and JavaScript Best Practices
Doris Chen
 
PDF
HTML5 for the Silverlight Guy
David Padbury
 
PDF
Having Fun with Play
Clinton Dreisbach
 
PDF
Developing High Performance Web Apps
Timothy Fisher
 
PDF
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
PDF
Ajax Performance Tuning and Best Practices
Doris Chen
 
PPTX
Let's react - Meetup
RAJNISH KATHAROTIYA
 
PPTX
e-suap - client technologies- english version
Sabino Labarile
 
PPT
Web performance essentials - Goodies
Jerry Emmanuel
 
KEY
[Coscup 2012] JavascriptMVC
Alive Kuo
 
PDF
Loom and concurrency latest
Srinivasan Raghavan
 
PDF
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Matthew Davis
 
Web Components v1
Mike Wilcox
 
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
#NewMeetup Performance
Justin Cataldo
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Webpack
Sofian Hadiwijaya
 
Integrating React.js Into a PHP Application
Andrew Rota
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
tdc-globalcode
 
Performance Optimization and JavaScript Best Practices
Doris Chen
 
HTML5 for the Silverlight Guy
David Padbury
 
Having Fun with Play
Clinton Dreisbach
 
Developing High Performance Web Apps
Timothy Fisher
 
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
Ajax Performance Tuning and Best Practices
Doris Chen
 
Let's react - Meetup
RAJNISH KATHAROTIYA
 
e-suap - client technologies- english version
Sabino Labarile
 
Web performance essentials - Goodies
Jerry Emmanuel
 
[Coscup 2012] JavascriptMVC
Alive Kuo
 
Loom and concurrency latest
Srinivasan Raghavan
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Matthew Davis
 

More from Deepu S Nath (20)

PPTX
Design Thinking, Critical Thinking & Innovation Design
Deepu S Nath
 
PDF
GTECH ATFG µLearn Framework Intro
Deepu S Nath
 
PPTX
Future of learning - Technology Disruption
Deepu S Nath
 
PDF
Decentralized Applications using Ethereum
Deepu S Nath
 
PDF
How machines can take decisions
Deepu S Nath
 
PDF
Artificial Intelligence: An Introduction
Deepu S Nath
 
PPTX
FAYA PORT 80 Introduction
Deepu S Nath
 
PDF
How machines can take decisions
Deepu S Nath
 
PDF
Simplified Introduction to AI
Deepu S Nath
 
PPTX
Mining Opportunities of Block Chain and BitCoin
Deepu S Nath
 
PPTX
Introduction to DevOps
Deepu S Nath
 
PPT
Coffee@DBG - TechBites March 2016
Deepu S Nath
 
PPT
SEO For Developers
Deepu S Nath
 
PDF
Life Cycle of an App - From Idea to Monetization
Deepu S Nath
 
PPT
Uncommon Python - What is special in Python
Deepu S Nath
 
PPT
Coffee@DBG - TechBites Sept 2015
Deepu S Nath
 
PPT
Techbites July 2015
Deepu S Nath
 
PPT
Apple Watch - Start Your Developer Engine
Deepu S Nath
 
PPTX
Greetings & Response - English Communication Training
Deepu S Nath
 
PPTX
Hybrid Mobile App Development - Xamarin
Deepu S Nath
 
Design Thinking, Critical Thinking & Innovation Design
Deepu S Nath
 
GTECH ATFG µLearn Framework Intro
Deepu S Nath
 
Future of learning - Technology Disruption
Deepu S Nath
 
Decentralized Applications using Ethereum
Deepu S Nath
 
How machines can take decisions
Deepu S Nath
 
Artificial Intelligence: An Introduction
Deepu S Nath
 
FAYA PORT 80 Introduction
Deepu S Nath
 
How machines can take decisions
Deepu S Nath
 
Simplified Introduction to AI
Deepu S Nath
 
Mining Opportunities of Block Chain and BitCoin
Deepu S Nath
 
Introduction to DevOps
Deepu S Nath
 
Coffee@DBG - TechBites March 2016
Deepu S Nath
 
SEO For Developers
Deepu S Nath
 
Life Cycle of an App - From Idea to Monetization
Deepu S Nath
 
Uncommon Python - What is special in Python
Deepu S Nath
 
Coffee@DBG - TechBites Sept 2015
Deepu S Nath
 
Techbites July 2015
Deepu S Nath
 
Apple Watch - Start Your Developer Engine
Deepu S Nath
 
Greetings & Response - English Communication Training
Deepu S Nath
 
Hybrid Mobile App Development - Xamarin
Deepu S Nath
 

Recently uploaded (20)

PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
DOCX
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
PDF
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PDF
Orbitly Pitch Deck｜A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PDF
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PDF
DevOps & Developer Experience Summer BBQ
AUGNYC
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
Doc9.....................................
SofiaCollazos
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
Orbitly Pitch Deck｜A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
DevOps & Developer Experience Summer BBQ
AUGNYC
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 

REACT.JS : Rethinking UI Development Using JavaScript

  • 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)
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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);
  • 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> ); } });
  • 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> ); } });
  • 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' };
  • 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' } }
  • 110. Vijay Dev Lead Front-end Engineer http://vijaydev.com/