React JS intro

A lightweight introduction to React JS in the context of web applications

Transcript

1. AN INTRODUCTION TO REACTJS GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO TWITTER: @GABRO27 / @BUILDOHQ
2. WORK@BUILDO.IO
4. HTML
5. HTML <!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
6. I just had to take the hypertext idea and connect it to the TCP and DNS ideas and — ta- da!— the World Wide Web — Tim Berners Lee
7. THE WEB, IN THE 90S ╔═══════════╗ ---------- ║ ║ gimme dat page
   
   ║ ║---------------------->
   
   ║ browser ║
   server
   ║ ║ <html>...</html>
   
   ║ ║<----------------------
   
   ╚═══════════╝ ----------
9. <a href="/somewhere-fun">LINK!</a>
10. ╔═══════════╗ 
    
    
    
    
    
     ║ ║ gimme dat page   ║ ║---------------------->  ║ ║   ║ ║ <html>...</html>   ║ ║<----------------------  ║ browser ║ ...  server  ║ ║   ║ ║ do dat thing   ║ ║---------------------->  ║ ║   ║ ║ <html>...</html>   ║ ║<----------------------  ║ ║   ╚═══════════╝ 
    
    
    
    
    
    
12. ADDING AN ELEMENT TO A CART <ul> <ul> <li>An apple</li> <li>An apple</li> <li>A horse</li> ---> <li>A horse</li> </ul> <li>A dragon</li> </ul>
14. JAVASCRIPT (1995)
16. ADDING AN ELEMENT TO A CART var ul = document.getElementById("cart"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Four")); ul.appendChild(li);
17. ╔═══════════╗  ║ ║ gimme dat page   ║ ║---------------------->  ║ ║ <html>...</html>   ║ browser ║<----------------------  ║ ║ script.js   ║ ║<---------------------- server  ║ ║─────┐   ╚═══════════╝ !   ▲ !   <html>...</html>! !add item   ! !   "########$ !   ! ! !  ! script !
    ----- ! ! %########&
19. SO YOU SAY WE CAN CREATE HTML ELEMENTS...
20. SPA SINGLE-PAGE APPLICATIONS
21. ╔═══════════╗ 
    
    
    
    
    
     ║ ║ gimme dat page   ║ ║---------------------->  ║ ║ <html>...</html>   ║ browser ║<----------------------  ║ ║ app.js   ║ ║<----------------------  ║ ╠─────┐   ╚═══════════╝ !   ▲ !  server  <html>...</html>! !do stuff   ! !   "##########$ !   ! !<-----   ! ! gimme data   ! app.js !---------------------->  ! !   ! ! { data: "blah", ... }   ! !<----------------------  %##########& 
    
    
    
    
    
    
22. THE USUAL SUSPECTS
23. SOUNDS GREAT BUT...
24. COMPLEXITY!
25. MUTABLE STATE
26. OVER THE LAST 25 YEARS WE'VE SEEN...
27. FLUSH THE PAGE AT EVERY CHANGE VS COMPUTE THE CHANGES LOCALLY
28. HERE'S HOW THE PAGE SHOULD LOOK LIKE VS HERE'S HOW TO MAKE IT
29. IN OTHER WORDS...
30. DECLARATIVE VS IMPERATIVE
31. AND POTENTIALLY...
32. DEVELOPER EXPERIENCE VS USER EXPERIENCE
33. MEET REACT
34. DX + UX = REACT
35. DECLARATIVE APPROACH CONCEPTUALLY RE-RENDERING EVERYTHING EVERYTIME
36. IMPERATIVE EXPERIENCE MUTATION HAPPENS BEHIND THE SCENE
37. MVC
38. IT'S ALL ABOUT REUSABLE COMPONENTS
40. OUR FIRST COMPONENT const Hello = React.createClass({ render() { return <div>Hello!</div>; } });
41. WAIT! HTML INSIDE JAVASCRIPT?!
42. YES, ALMOST...
43. JSX <div>Hello</div> gets translated to React.createElement("div", null, "Hello");
44. Details aside, there's no separation between templates and logic
45. SEPARATE CONCERNS NOT TECHNOLOGIES
46. ONLY TWO THINGS CAN AFFECT A COMPONENT > props ! > state "
47. PROPS ! A generalization over HTML attributes <button className='button inactive'>Click</button> gets translated to React.createElement( "button", { className: 'button inactive' }, // <--- props "Click" );
48. OUR FIRST COMPONENT ACCEPTING PROPS const Greeter = React.createClass({ render() { return <div>Hello {this.props.name}!</div>; } ^ }); | just a javascript variable
49. AND THEN USE IT LIKE <Greeter name='Gabriele' /> ^ |_____________ passing a prop
50. CAN THIS BE EFFICIENT?
51. YOU WRITE render() { return ( <div> <span>Hello {this.props.userName}!</span> </div> ); }
52. REACT COMPUTES renderA: <div><span>Hello Gabriele!</span></div> renderB: <div><span>Hello Irina!</span></div> => [replaceAttribute textContent 'Hello Irina'] ^ | | a state mutation, i.e. the horrible thing you want to avoid writing by hand
53. STATE ! A component can have an internal state AVOID WHEN YOU CAN!
54. OUR FIRST STATEFUL COMPONENT !
55. const Counter = React.createClass({ getInitialState() { return { count: 0 }; }, increaseCount() { this.setState({ count: this.state.count + 1 }); }, ^ |_______________ triggers a re-render render() { return ( <div> <span>{this.state.count}</span> <button onClick={this.increaseCount}>Increase</button> </div> ); } });
56. THAT'S IT
57. REACT RECAP Everything is a component Components accept props Components can have a state !
58. DEMO
59. THANKS
60. <Speaker questions={?} />