COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
•
0 likes•225 views
This document provides an introduction to ReactJS and discusses its key concepts. It explains that React uses a declarative paradigm where the user specifies what should be rendered rather than how to render it. Components are reusable pieces that accept input data via props and can maintain internal state. React efficiently re-renders only what has changed by comparing previous and next elements.
Recommended
More Related Content
What's hot
What's hot (7)
Viewers also liked
Viewers also liked (20)
Similar to COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
Similar to COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella) (20)
More from InSide Training
More from InSide Training (18)
Recently uploaded
Recently uploaded (20)
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
- 2. AN INTRODUCTION TO REACTJSGABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO TWITTER: @GABRO27 / @BUILDOHQ
- 3. ME, HI!
- 5. HTML
- 6. HTML <!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
- 7. 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
- 8. THE WEB, IN THE 90S ╔═══════════╗ ---------- ║ ║ gimme dat page ║ ║----------------------> ║ browser ║ server ║ ║ <html>...</html> ║ ║<---------------------- ╚═══════════╝ ----------
- 11. ╔═══════════╗ ║ ║ gimme dat page ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ browser ║ ... server ║ ║ ║ ║ do dat thing ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ ║ ╚═══════════╝
- 13. 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>
- 15. JAVASCRIPT(1995)
- 17. ADDING AN ELEMENT TO A CART var ul = document.getElementById("cart"); var li = document.createElement("li"); li.appendChild(document.createTextNode("A dragon")); ul.appendChild(li);
- 18. ╔═══════════╗ ║ ║ gimme dat page ║ ║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ script.js ║ ║<---------------------- server ║ ║─────┐ ╚═══════════╝ ! ▲ ! <html>...</html>! !add item ! ! "########$ ! ! ! ! ! script !◀----- ! ! %########&
- 20. SO YOU SAY WE CAN CREATE HTML ELEMENTS...
- 22. ╔═══════════╗ ║ ║ gimme dat page ║ ║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ app.js ║ ║<---------------------- ║ ╠─────┐ ╚═══════════╝ ! ▲ ! server <html>...</html>! !do stuff ! ! "##########$ ! ! !<----- ! ! gimme data ! app.js !----------------------> ! ! ! ! { data: "blah", ... } ! !<---------------------- %##########&
- 25. COMPLEXITY!
- 26. MUTABLE STATE
- 27. OVER THE LAST 25 YEARS WE'VE SEEN...
- 28. FLUSH THE PAGE AT EVERY CHANGE VS COMPUTE THE CHANGES LOCALLY
- 29. HERE'S HOW THE PAGE SHOULD LOOK LIKE VS HERE'S HOW TO MAKE IT
- 34. MEET REACT
- 35. DX + UX = REACT
- 37. IMPERATIVE EXPERIENCE MUTATION HAPPENS BEHIND THE SCENE
- 38. MVC
- 41. OUR FIRST COMPONENT const Hello = React.createClass({ render() { return <div>Hello!</div>; } });
- 43. YES, ALMOST...
- 44. JSX <div>Hello</div> gets translated to React.createElement("div", null, "Hello");
- 45. Details aside, there's no separation between templates and logic
- 47. ONLY TWO THINGS CAN AFFECT A COMPONENT > props ! > state "
- 48. PROPS ! A generalization over HTML attributes <button className='button inactive'>Click</button> gets translated to React.createElement( "button", { className: 'button inactive' }, // <--- props "Click" );
- 49. OUR FIRST COMPONENT ACCEPTING PROPS class Greeter extends React.Component { render() { return <div>Hello {this.props.name}!</div>; } ^ } | just a javascript variable
- 50. AND THEN USE IT LIKE <Greeter name='Gabriele' /> ^ |_____________ passing a prop
- 52. YOU WRITE render() { return ( <div> <span>Hello {this.props.userName}!</span> </div> ); }
- 53. 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
- 54. STATE ! A component can have an internal state AVOID WHEN YOU CAN!
- 55. THAT'S IT
- 56. REACT RECAPBring the 90s back (re-render everything!) The V of MVC Everything is a component
- 57. DEMO