REACT.JS : Rethinking UI Development Using JavaScript

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

“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

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(););

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!'};

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

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

your page

$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>');

your page

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 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);

❖ 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> ); }});

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'}];

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' };

<PosterItem data={ pageData[i] }> <PosterNameCasts data={ iSrc, iAlt, iTitle,

iHref, iCast } /> <PosterRatingTheater data={ iRating,

itheaterHref } /></PosterItem>

</MoviePosterList>

ReactDOM.render(<MoviePosterContent data={ data } />, $domNode);

ReactDOM.render( <MoviePosterContent data={ data } />, $domNode );

</MoviePosterList>

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);

“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

“...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

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' }}

Thank you

Vijay DevLead Front-end Engineerhttp://vijaydev.com/

REACT.JS : Rethinking UI Development Using JavaScript

Technology

Transcript of REACT.JS : Rethinking UI Development Using JavaScript