React - - PowerPoint PPT Presentation

React

A"JavaScript"Library"For"Building"User"Interfaces

React&is&not&FRP

[Func&onal]+Reac&ve+programming+is+programming+with+ asynchronous+data+streams. !!"André"Staltz1

1"The"introduc.on"to"Reac.ve"Programming"you've"been"missing

Component(Based

It's%components%all%the%way%down!

Func%onal)*)Declara%ve)UI

Impera've)<+>)Declara've

Func%onal)*)Declara%ve)UI

Virtual(DOM

The$UI$is$first$rendered$to$a$virtual$DOM,$then$a$minimal$and$ efficient$diff$is$applied$to$the$actual$DOM$to$update$the$visible$UI.

(aside)(JSX(Syntax

// JSX as authored <div className="app"> <h2>Hello World</h2> <p>Welcome to {this.props.appName}</p> <UserList users={activeUsers} /> </div>

// output JS React.createElement("div", {className: "app"}, React.createElement("h2", null, "Hello World"), React.createElement("p", null, "Welcome to ", this.props.appName), React.createElement(UserList, {users: activeUsers}) )

Sample'App

Sample'App

• App$component$(blue)

Sample'App

• App$component$(blue)
• User$list$component$(green)

Sample'App

• App$component$++$blue
• User$list$component$++$green
• Profile$component(s)$++$red

User%profile%component

var Profile = React.createClass({ githubUrl: function() { return "https://github.com/" + this.props.user.github; }, render: function() { return ( <li className="user"> <a href={this.githubUrl()}> {this.props.user.name} on github </a> </li> ) } });

User%List%Component

var UserList = React.createClass({ renderUser: function(user) { return <Profile user={user} /> }, render: function() { return ( <ul> {this.props.users.map(this.renderUser)} </ul> ) } })

App#Component

var App = React.createClass({ render: function() { return ( <div className="app"> <h1>Active Users</h1> <p>{this.props.users.length} active users</p> <UserList users={this.state.users} /> </div> ) } })

Boot$The$App

var users = [ { name: "Chris", github: "christoomey" }, { name: "Joe", github: "jferris" }, { name: "Ben", github: "r00k" }, { name: "Chad", github: "cpytel" } ]; React.renderComponent( <App users={users} />, document.getElementById('content') );

Rethinking)Best)Prac0ces

• Render&the&world"#"Re#render"everything"on"any"change"Re#

render"the"en2re"app"(in"memory)"on"all"changes,"then"efficiently" update"the"UI"to"match.

• Sepera/on&of&Concerns"#"Rather"than"pulling"out"templates,"

separate"in"terms"of"components

• Hide&the&DOM"#"The"Virutal"DOM"abstracts"away"the"harsh"

reality"of"the"DOM"API"and"allows"you"to"focus"on"your"app. From%Pete%Hunt's%presenta0on

The$right$abstrac-on

Abstrac(ng+away+the+DOM+has+lead+to+some+very+impressive+work+ in+short+(me

• canvas'render'target
• Ne.lix's'gibbon'widget'system
• Server'side'/'isometric'rendering':
• react'na;ve

Flipboard's,Canvas

In#search#of#60fps#on#mobile. React&Canvas&adds&the&ability&for&React& components&to&render&to&<canvas>& rather&than&DOM.

Ne#lix'Gibbon

Ne#lix's)Gibbon)widget)system)is)an) alterna6ve)rendering)engine)that)takes)the) place)of)the)DOM,)while)s6ll)using)React.

Server%Side

Since&the&DOM&is&abstracted&away,&react&can&run&in&Node&and& render&to&a&string!

React&Na(ve

The$Right$Abstrac/on

It's%worth%no+ng%that%we're%not%chasing%“write%once,%run%anywhere.”% Different%pla;orms%have%different%looks,%feels,%and%capabili+es,%and% as%such,%we%should%s+ll%be%developing%discrete%apps%for%each% pla;orm,%but%the%same%set%of%engineers%should%be%able%to%build% applica+ons%for%whatever%pla;orm%they%choose,%without%needing%to% learn%a%fundamentally%different%set%of%technologies%for%each.%We%call% this%approach%“learn%once,%write%anywhere.” !!"Tom"Occhino"(React"team"at"Facebook)2

2"h$ps:/

/facebook.github.io/react/blog/2015/03/26/introducing>react>na?ve.html

Learning(More

• Official(React(tutorial(from(Facebook
• Ryan(Florence's(React(training(repo
• Presenta;on(by(Ember(core(team(member(on(React
• React=rails(gem