![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](https://image.slidesharecdn.com/petronellatorino-160704130230/85/COSTRUIRE-INTERFACCE-WEB-UTILIZZANDO-REACTJS-Gabriele-Petronella-53-320.jpg)
![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](https://image.slidesharecdn.com/petronellatorino-160704130230/75/COSTRUIRE-INTERFACCE-WEB-UTILIZZANDO-REACTJS-Gabriele-Petronella-53-2048.jpg)
Uploaded byInSide Training
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
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.
More Related Content
Similar to COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
- 2. AN INTRODUCTION TO REACTJSGABRIELEPETRONELLA SOFTWARE ENGINEER @ BUILDO TWITTER: @GABRO27 / @BUILDOHQ
- 3.
- 5.
- 6. HTML <!DOCTYPE html> <html> <head> <title>This isa title</title> </head> <body> <p>Hello world!</p> </body> </html>
- 7. I just hadto 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, INTHE 90S ╔═══════════╗ ---------- ║ ║ gimme dat page ║ ║----------------------> ║ browser ║ server ║ ║ <html>...</html> ║ ║<---------------------- ╚═══════════╝ ----------
- 10.
- 11. ╔═══════════╗ ║ ║ gimmedat page ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ browser ║ ... server ║ ║ ║ ║ do dat thing ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ ║ ╚═══════════╝
- 13. ADDING AN ELEMENTTO 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.
- 17. ADDING AN ELEMENTTO A CART var ul = document.getElementById("cart"); var li = document.createElement("li"); li.appendChild(document.createTextNode("A dragon")); ul.appendChild(li);
- 18. ╔═══════════╗ ║ ║ gimmedat page ║ ║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ script.js ║ ║<---------------------- server ║ ║─────┐ ╚═══════════╝ ! ▲ ! <html>...</html>! !add item ! ! "########$ ! ! ! ! ! script !◀----- ! ! %########&
- 20. SO YOU SAYWE CAN CREATE HTML ELEMENTS...
- 21.
- 22. ╔═══════════╗ ║ ║ gimmedat page ║ ║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ app.js ║ ║<---------------------- ║ ╠─────┐ ╚═══════════╝ ! ▲ ! server <html>...</html>! !do stuff ! ! "##########$ ! ! !<----- ! ! gimme data ! app.js !----------------------> ! ! ! ! { data: "blah", ... } ! !<---------------------- %##########&
- 23.
- 24.
- 25.
- 26.
- 27. OVER THE LAST25 YEARS WE'VE SEEN...
- 28. FLUSH THE PAGEAT EVERY CHANGE VS COMPUTE THE CHANGES LOCALLY
- 29. HERE'S HOW THEPAGE SHOULD LOOK LIKE VS HERE'S HOW TO MAKE IT
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. DX + UX= REACT
- 36.
- 37. IMPERATIVE EXPERIENCE MUTATION HAPPENSBEHIND THE SCENE
- 38.
- 39.
- 41. OUR FIRST COMPONENT constHello = React.createClass({ render() { return <div>Hello!</div>; } });
- 42.
- 43.
- 44.
- 45. Details aside, there'sno separation between templates and logic
- 46.
- 47. ONLY TWO THINGSCAN AFFECT A COMPONENT > props ! > state "
- 48. PROPS ! A generalizationover HTML attributes <button className='button inactive'>Click</button> gets translated to React.createElement( "button", { className: 'button inactive' }, // <--- props "Click" );
- 49. OUR FIRST COMPONENTACCEPTING PROPS class Greeter extends React.Component { render() { return <div>Hello {this.props.name}!</div>; } ^ } | just a javascript variable
- 50. AND THEN USEIT LIKE <Greeter name='Gabriele' /> ^ |_____________ passing a prop
- 51.
- 52. YOU WRITE render() { return( <div> <span>Hello {this.props.userName}!</span> </div> ); }
- 53. REACT COMPUTES renderA: <div><span>HelloGabriele!</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 componentcan have an internal state AVOID WHEN YOU CAN!
- 55.
- 56. REACT RECAPBring the90s back (re-render everything!) The V of MVC Everything is a component
- 57.
- 59.