React JS intro

AN INTRODUCTION TO REACTJS GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO
TWITTER: @GABRO27 / @BUILDOHQ

WORK@BUILDO.IO

HTML <!DOCTYPE html> <html> <head> <title>This is a title</title> </head>
<body> <p>Hello world!</p> </body> </html>

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

THE WEB, IN THE 90S ╔═══════════╗ ---------- ║ ║ gimme
dat page ║ ║----------------------> ║ browser ║ server ║ ║ <html>...</html> ║ ║<---------------------- ╚═══════════╝ ----------

╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ browser ║ ... server ║ ║ ║ ║ do dat thing ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ ║ ╚═══════════╝

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>

JAVASCRIPT (1995)

ADDING AN ELEMENT TO A CART var ul = document.getElementById("cart");
var li = document.createElement("li"); li.appendChild(document.createTextNode("Four")); ul.appendChild(li);

╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ script.js ║ ║<---------------------- server ║ ║─────┐ ╚═══════════╝ ! ▲ ! <html>...</html>! !add item ! ! "########$ ! ! ! ! ! script !----- ! ! %########&

SO YOU SAY WE CAN CREATE HTML ELEMENTS...

SPA SINGLE-PAGE APPLICATIONS

╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ app.js ║ ║<---------------------- ║ ╠─────┐ ╚═══════════╝ ! ▲ ! server <html>...</html>! !do stuff ! ! "##########$ ! ! !<----- ! ! gimme data ! app.js !----------------------> ! ! ! ! { data: "blah", ... } ! !<---------------------- %##########&

THE USUAL SUSPECTS

SOUNDS GREAT BUT...

COMPLEXITY!

MUTABLE STATE

OVER THE LAST 25 YEARS WE'VE SEEN...

FLUSH THE PAGE AT EVERY CHANGE VS COMPUTE THE CHANGES
LOCALLY

HERE'S HOW THE PAGE SHOULD LOOK LIKE VS HERE'S HOW
TO MAKE IT

IN OTHER WORDS...

DECLARATIVE VS IMPERATIVE

AND POTENTIALLY...

DEVELOPER EXPERIENCE VS USER EXPERIENCE

MEET REACT

DX + UX = REACT

DECLARATIVE APPROACH CONCEPTUALLY RE-RENDERING EVERYTHING EVERYTIME

IMPERATIVE EXPERIENCE MUTATION HAPPENS BEHIND THE SCENE

IT'S ALL ABOUT REUSABLE COMPONENTS

OUR FIRST COMPONENT const Hello = React.createClass({ render() { return
<div>Hello!</div>; } });

WAIT! HTML INSIDE JAVASCRIPT?!

YES, ALMOST...

JSX <div>Hello</div> gets translated to React.createElement("div", null, "Hello");

Details aside, there's no separation between templates and logic

SEPARATE CONCERNS NOT TECHNOLOGIES

ONLY TWO THINGS CAN AFFECT A COMPONENT > props !
> state "

PROPS ! A generalization over HTML attributes <button className='button inactive'>Click</button>
gets translated to React.createElement( "button", { className: 'button inactive' }, // <--- props "Click" );

OUR FIRST COMPONENT ACCEPTING PROPS const Greeter = React.createClass({ render()
{ return <div>Hello {this.props.name}!</div>; } ^ }); | just a javascript variable

AND THEN USE IT LIKE <Greeter name='Gabriele' /> ^ |_____________
passing a prop

CAN THIS BE EFFICIENT?

YOU WRITE render() { return ( <div> <span>Hello {this.props.userName}!</span> </div>
); }

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

STATE ! A component can have an internal state AVOID
WHEN YOU CAN!

OUR FIRST STATEFUL COMPONENT !

THAT'S IT

REACT RECAP Everything is a component Components accept props Components
can have a state !

THANKS

React JS intro

React JS intro

More Decks by Gabriele Petronella

Other Decks in Programming

Featured

Transcript