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

React JS intro

Gabriele Petronella
September 30, 2015
Programming
3
320

React JS intro

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

Gabriele Petronella

September 30, 2015
Tweet

More Decks by Gabriele Petronella

See All by Gabriele Petronella
Design System Adventures in React
gabro
0
59
Casting Metals
gabro
0
340
Functional Programming in front-end applications
gabro
1
210
Functional Programming in Front-end Applications
gabro
3
140
How to get away with Functional Programming in front-end applications
gabro
3
1.2k
Bridging the tooling gap with Scala.js
gabro
0
240
Monad Transformers Down to Earth
gabro
2
2.2k
Move fast and fix things
gabro
0
300
Mythical trees and where to find them
gabro
0
200

Other Decks in Programming

See All in Programming
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
350
使ってみよう Azure AI Document Intelligence
kosmosebi
2
280
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Amazon SQSコンシューマー疎結合への旅 - 出張！ #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Rethinking UI building strategies @ SFI 2024
letelete
0
270
見た目から始める生産性向上
ikumatadokoro
7
800
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k

Featured

See All Featured
Documentation Writing (for coders)
carmenintech
60
3.9k
Embracing the Ebb and Flow
colly
80
4.1k
Adopting Sorbet at Scale
ufuk
68
8.6k
Teambox: Starting and Learning
jrom
128
8.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Happy Clients
brianwarren
92
6.4k
Designing Experiences People Love
moore
136
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Testing 201, or: Great Expectations
jmmastey
28
6.3k
The Language of Interfaces
destraynor
151
23k
What's in a price? How to price your products and services
michaelherold
237
11k
Infographics Made Easy
chrislema
238
18k

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