Post on 16-Apr-2017
REACT.JS RETHINKING UI DEVELOPMENT WITH JAVASCRIPT
Introduction
AgendaOverviewComponentsJSXData for componentThe component lifecycleComponent MethodsComponent BreakdownReact v0.14Flux (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
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
getInitialStateonly called once, and is called as the component is being mounted.
componentWillMountAs 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> ); }});
componentDidMountOnce 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> ); }});
componentWillUnmountIf 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
getDefaultPropsDefine 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 );
propTypesSpecify 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 );
mixinsSo 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 loopLooping 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 componentsCase study: How to breakdown UI into various reusable components
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 DOMReact.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 DOMReact.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 DOMReact.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 DOMReact.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 DOMReact.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 DOMReact.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 DOMReact.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 DOMReact.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
Flux
pageData: [ {'Puthiya Niyamam', ...}, {'Maheshinte Prathikaaram', ...}, {'Action Hero Biju', ...}, {'Mastizaade', ...}]
pageData: [ {'Pachakallam', ...}, {'Jalam', ...}, {'Airlift', ...}, {'Kya Kool Hai Hum', ...}]
{ 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' }}
Thank you
Vijay DevLead Front-end Engineerhttp://vijaydev.com/