Basic React Intro

Here're the slides for my talk on Intro React at NYCDA. Please feel free to use, share or modify

Transcript

1. A REALLY BASIC INTRO TO REACT & REACT ON RAILS HSIN HSIAO TASTING COLLECTIVE
2. REACT IS THE “V” IN MVC • View library (render markup & handle UI) • Created, used and open-sourced by Facebook • Designed to handle evolving multi-state events • Frameworkless - easy to plug in • FAST! Really!
3. HELLO JOHN • https://facebook.github.io/react
4. HELLO JOHN WITH JSX
6. REACT FEATURES • Components: Javascript functions, no special syntax or rules • Reusability • Composability • Uni-directional flow of data
7. THINKING IN REACT COMPOSITION OF COMPONENTS STATE & PROPS DATA FLOW
8. DATA FLOW • Data (model) change event • State & props change • DOM RE-RENDER
9. DOM RE-RENDER? • React re-renders your app on every update • ISN’T THAT SUPER SLOW?
10. VIRTUAL DOM • Representation of DOM in memory • On data update, new (virtual) DOM diffs with old DOM • Only the difference is re-rendered • “Re-render, not mutate your DOM”
11. DOM OPERATIONS ARE EXPENSIVE! • JQuery way: $(‘#ticket-number’).html(), $(‘#plus’).on(‘click’) … • DOM traversing and manipulations are costly • React way: compute diff in memory & touch minimal set of DOM nodes
13. APP STRUCTURE: MVC
14. GAME OF TRACING ARROWS
15. FB BUDDY LIST Source: Pete Hunt’s Talk on FutureJS 2014
16. • Alice went offline • Bob went offline • Steve went online • Bob went online • Charles is idle • Charles is on mobile
17. ?
18. –some developer “Data change over time is the root of all evil.”
19. FLUX • React: best if only handles UI logic • Outsource tasks to FLUX • Task #1: Talk to server & fetch data • Task #2: Track user actions • Task #3: Track states and mutate states
20. FLUX ACHITECTURE • Components/server send actions to Dispatcher • Dispatcher signal server to update model & dispatch payload (data) to Store • Store updates “state” & emit change signal for React to re-render
21. TIME FOR AN EXAMPLE https://github.com/hsin421/react4nycda
22. REACT ON RAILS: 3 WAYS TO INTEGRATE • 1) Rails-React Gem: light, drop in components anywhere in Rails view • 2) Separate entire front-end in React, bundled by Webpack and injected into Rails asset pipeline • 3) Stand-alone front-end in Node/React, and use Rails-API for back-end only
23. #1 RAILS-REACT GEM • PROS: Easy to plug in. Use only when needed. • CONS: Manage external React extensions (Think writing Rails without “bundle install” and install gems by hand)
24. #2 WEBPACK -> ASSET PIPELINE #3 NODE/REACT + RAILS-API • PROS: complete separation of front-end & NPM install dependencies • CONS: labor-intensive setup & need to maintain 2 sets of apps
25. REACT ON RAILS PERK ISOMORPHIC RENDERING • Server-side: Fast initial load + SEO but low interactivity + slow page refresh • Client-side: Fast page refresh + instant response but long initial load + no SEO (?)
26. REACT ON RAILS PERK ISOMORPHIC RENDERING • Server-side: Rails & Client-side: React • Rails -> static markup • React -> checks markup in place
 attaches JS without re-render
27. STILL ON THE FENCE?
28. REACT NATIVE 
 WRITE NATIVE MOBILE APPS IN JS • Magic of virtual DOM - abstract representation of DOM elements in memory • Render to HTML markup • Render to canvas (FLIP mobile 
 web app) • Render to iOS (or Android)
 elements
29. Facebook F8 Developer Conference App
30. Facebook Groups App
31. In App Store one week after React Native came out
32. REACT NATIVE IN ACTION