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

React JS intro

C2bb0454c4af1a61e7f173d54ce17b0b?s=47 Gabriele Petronella
September 30, 2015
Programming
3
260

React JS intro

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

C2bb0454c4af1a61e7f173d54ce17b0b?s=128

Gabriele Petronella

September 30, 2015
Tweet

More Decks by Gabriele Petronella

See All by Gabriele Petronella
Casting Metals
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
300
Functional Programming in front-end applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
1
190
Functional Programming in Front-end Applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
3
130
How to get away with Functional Programming in front-end applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
3
990
Bridging the tooling gap with Scala.js
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
230
Monad Transformers Down to Earth
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
2
1.7k
Move fast and fix things
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
280
Mythical trees and where to find them
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
190
Move fast and fix things
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
1
3.2k

Other Decks in Programming

See All in Programming
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
7e5089310d68eca7e2ad404a1c8f2292?s=48 blendthink
1
200
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
3
1k
roadmap to rust 2024
F0493f5bcb4cc9fdccc54ae3e8ab6bd0?s=48 matsu7874
1
560
Practical Advanced Kotlin in Practice
4580c218737149bf44d012a110612010?s=48 rock3r
3
130
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
Be01969dc1e5ac0998183f9a114dbf58?s=48 iwasiman
1
140
よりUXに近いSLI・SLOの運用による可用性の再設計
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
3
450
Managing gRPC with Wire
05162bc961c3654218bf1839974a4f35?s=48 oldergod
2
150
職場にPythonistaを増やす方法
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
180
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
120
既存のプロジェクトにKMMを導入するための対応策
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
2
280
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
450
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
1.4k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
19k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.7k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.3k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
48
2.5k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
61
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M

Transcript

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

    TWITTER: @GABRO27 / @BUILDOHQ

  2. WORK@BUILDO.IO

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