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é"Staltz 1 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