React Intro

React is a JavaScript framework used for building dynamic UIs. Learn why React is interesting and what makes it different from the other frameworks for JS UIs.

Transcript

1. React A"JavaScript"Library"For"Building"User"Interfaces
2. 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
3. Component(Based It's%components%all%the%way%down!
4. Func%onal)*)Declara%ve)UI Impera've)<+>)Declara've
5. Func%onal)*)Declara%ve)UI
6. 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.
7. (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}) )
8. Sample'App
9. Sample'App • App$component$(blue)
10. Sample'App • App$component$(blue) • User$list$component$(green)
11. Sample'App • App$component$++$blue • User$list$component$++$green • Profile$component(s)$++$red
12. 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> ) } });
13. 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> ) } })
14. 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> ) } })
15. 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') );
16. 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
17. 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
18. Flipboard's,Canvas In#search#of#60fps#on#mobile. React&Canvas&adds&the&ability&for&React& components&to&render&to&<canvas>& rather&than&DOM.
19. 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.
20. Server%Side Since&the&DOM&is&abstracted&away,&react&can&run&in&Node&and& render&to&a&string!
21. React&Na(ve
22. 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
23. 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