Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React JS intro

Avatar for Gabriele Petronella Gabriele Petronella
September 30, 2015
Programming
3
390

React JS intro

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

Avatar for Gabriele Petronella

Gabriele Petronella

September 30, 2015
Tweet

More Decks by Gabriele Petronella

See All by Gabriele Petronella
Design System Adventures in React - ReactJS Day 2024
Avatar for Gabriele Petronella gabro
0
100
Design System Adventures in React
Avatar for Gabriele Petronella gabro
1
100
Casting Metals
Avatar for Gabriele Petronella gabro
0
360
Functional Programming in front-end applications
Avatar for Gabriele Petronella gabro
1
230
Functional Programming in Front-end Applications
Avatar for Gabriele Petronella gabro
3
180
How to get away with Functional Programming in front-end applications
Avatar for Gabriele Petronella gabro
3
1.5k
Bridging the tooling gap with Scala.js
Avatar for Gabriele Petronella gabro
0
280
Monad Transformers Down to Earth
Avatar for Gabriele Petronella gabro
2
2.7k
Move fast and fix things
Avatar for Gabriele Petronella gabro
0
340

Other Decks in Programming

See All in Programming
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
210
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
330
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
190
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
250
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
Avatar for Swimmy reoandroider
0
130
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
370
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
240
アメ車でサンノゼを走ってきたよ！
Avatar for Shigure Shimotori s_shimotori
0
230
20251016_Rails News ～Rails 8.1の足音を聴く～
Avatar for Masato Mori morimorihoge
2
660
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
7
3.3k

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
920
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k

Transcript

  1. AN INTRODUCTION TO REACTJS GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO

    TWITTER: @GABRO27 / @BUILDOHQ

  2. [email protected]

  3. None

  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>   ║ ║<----------------------  ╚═══════════╝ ----------
  8. None

  9. <a href="/somewhere-fun">LINK!</a>

  10. ╔═══════════╗  ║ ║ gimme dat page   ║

    ║---------------------->  ║ ║   ║ ║ <html>...</html>   ║ ║<----------------------  ║ browser ║ ...  server  ║ ║   ║ ║ do dat thing   ║ ║---------------------->  ║ ║   ║ ║ <html>...</html>   ║ ║<----------------------  ║ ║   ╚═══════════╝ 
  11. None

  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>
  13. None

  14. JAVASCRIPT (1995)

  15. None

  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 !----- ! ! %########&
  18. None

  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

  39. None

  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={?} />