Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reactjs - the good, the bad and the ugly

1,338 views

Published on

A talk about Facebook's React library at BulgariaWebSummit 2016 (http://bulgariawebsummit.com/)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Reactjs - the good, the bad and the ugly

  1. 1. * Library by Ii * View layer * Virtual DOM * J SX
  2. 2. X". s'_ .4lWi~lP. r{. §li I . KI>41.~--I'FI. l‘IC ‘OEODJYIEL . ..[. .A. . . .F_ . ' ~. W.i; l.Ptllilllf
  3. 3. ‘: «i‘. .f: rvr ca’, t;. ii;1;i= *"r4i: iii: i:ii: ra: :.-i; ii. i"‘>- *il; i:. i75éY . ~.*: _r'¢. +=*“: .ri. -fisietiir; *,fIir‘i. r °‘ : a.: rv. »-'"°‘ " ’. .< E _ _ , . Q ,1 1‘-ii, ‘ F’ iii: r_r1a_c; c.i. Igi; ir. :.r. ;i: ;.i. --. <‘. ,.«‘fg I» 1 ii: l. r‘. r;£ * 1 ‘fjr. :.i: L:Ii. ..r; ‘.-i‘i1‘. rr£Isr= *"i1;r; ;:; f7'“ : .r. _Ii: .rs_i; ;i: ,t: r=*": m:. ii: .iJ; l"',7’~-
  4. 4. s1.w= " . iii~1I. l-, -,r= .rg(f-i. sI'l; -i" , b~ 1g>1_i9)_oIé-mi. .:]_si: ' .1 ’ . »4j_g>‘ ‘}I)_U_I_I_P ‘ E7‘ L, 4.1- iI. l‘vr"m_9Ia= "‘i1:, 7l| .|. lT-‘= "'= )_I. !.t5l! .1"', " . . _ Mir 'm_gi; =*"si-. I‘-n- '= Itu. ir-'= *";1-. l‘o. a.n. I.1il“ )- 4lI! )_U. I.I. P‘ . .. i_'r’. -._i; ;. . — ; i“. il. ;lr. i=*‘: .i. ,-1;i; ii‘si; i.. .i _, l . -.4 1.); 2 ‘ ~ii‘I’L<: i-. r.'a-. .i: ;r. i. t “
  5. 5. <section> <h1>{ title }</ h1> <sma. ll>{ getDa. te() }</ sma. ll> <div> <o1> {results. ma. p(function(resu. lt) { , y , return <li key= {result. id}>{result. text}</ li>; })} “ '2 </01> </ div> </ section>
  6. 6. .1.. . WWE R. mm mm and EN @ E@ , l . ‘ l . T- K‘ .4’ , . §, ‘_“-. /8 .
  7. 7. <div cla. es= "conta. iner"> <img src= "a. ssets/ ima. ge. svg" / > <p>Lorem1psum . ..</ p> change(3) / ;¢ change(1) isili. Virtual /1 DOM <form> ~ - - l 'l <input type= "text'' na-m°= "ema-11"/ > <div e1ass= “containe1 <input type= "submit" va. lue= "submit" / > <img src= "a. ssets/1' </ form> <p>Lorem ipsum . . . <form> </ d1V> 5‘ ' R ‘ N ' <inPut: WDe= "te , <input t: ype= "s. </ form> </ d‘1v>
  8. 8. #3”/ . , J ,7 Tilt . .Ilr. F . W; J» .4 _ V
  9. 9. A ‘V 1‘: - }—' it s: .~¢1=*‘‘; r1f-r: .ri¢1‘i*»-1T 1. j. l.~: '-4. '.7‘. ;l. ~.~»"‘*-1;. ~‘; mi.1ir; gii: *- 1 ‘1'. ll 4 / i. _ 4- $%$%wawmw- : ‘.1 -1. ii 3‘: _.’C*= 'lLEf’Tv? ‘iH7“l‘*“: i‘flJC_D~“71 ii. A - in 1‘! 1‘: 1,. ‘ iv. ‘ l. ’—'. -'1 z—‘. + i. ‘ ’l. “. ‘I ‘. . Z. '2' V
  10. 10. // see LLDDDSZ/ /githL1D. L g = this; } g. Rea. ctDOM = f(g. Rea. ct); 1 r}_)(function(R. ea. ct) { ' return React. _SEORET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; I);
  11. 11. npm install react react-dom
  12. 12. import React from “react”; import Rea. ctDO1II from “react-dom”
  13. 13. "" ¥ Xx H’, ’ ‘ [Ix ‘ { [H3 I Ii‘ . | I 7 7 rl II‘ . m. ‘if I 1 ‘ AA “ @ iR%«: F9 JT~sWWrW{%4 I .
  14. 14. var React = require('rea. ct'); ’ var Rea. ctDOM = require('rea. ct-dom'); var Mycomponent = Rea. ct. crea. teCla. ss({ , ._ render: function () { ; _ :7. l_'; «_/ * return Rea. ct. crea. teE1ement( 7: ' ‘ ‘div’, null, ‘Hello World’ ‘ I ); }; J 3 var node = document. querySe1ector(’. content’); ' Rea. ctDOM. render(MyComponent, node); N 4 g “ 0 _ ‘ 'L ,2’ V l 1 '. .. 'r . . . - ‘ ‘I _ I . I ‘. j->r; ..‘‘-»£1-; ,t ‘ a ' ‘9': ;;. .» "73 “ §' ‘. I': .4_? ?¢‘ _ .4. , ‘A. ’ I ' _'_ _. .~. ’;a. y-; i'. ‘v. $.*. .'v: .'». -;~. z. ,.; , ‘. ‘. “‘(_‘, ':.4.: .>‘i-<‘ -‘4-“
  15. 15. import React from “react”; import ReactDOM from “react-dom” class Mycomponent extends React. Component { render() { return <div>He1lo World</ div>; } } var node = document. querySe1ector(’. content’); ReactDOM. render(<MyComponent / >, node);
  16. 16. import React from “react”; % . _ import ReactDOM from “react-dom’wael= *~<@m. ,€, ;i. class Mycomponent extends React. Component { render() { return <div>Hello World</ div>; } } var node = document. querySelector(’. content’); ReactDOM. render(<MyComponent / >, node);
  17. 17. npm install react react-dom
  18. 18. npm install react react-dom babel-core babel-preset—es2015 babel-preset-react
  19. 19. A 2, ’ V g‘ x " . ' - I - A4 5’ I ‘ . -. “ . ‘.'. _(: ',_‘V: _;t. &;. _‘~| _., ‘_, _‘», .* :5‘: -__h'£: ;£’. .;__. -". ", ‘,{, § . .I': .4.f2' .4. ,
  20. 20. Props class Mycomponent ext render() { 3'3 return <div>Hello Wo: State 1 Rd } HTML
  21. 21. <MyComponent tit1e= ’Hello world’ / > 1 class Mycomponent extends React. Comp render() { return <div>{ tl1is. props. title }</ div>; } }
  22. 22. <MyComponent> <p><IconBullet / > Lorem ipsum</ p> </ MyComponent> i class Mycomponent extends React. Compc render() { return ( <section> <hl >He11o wor1d</ h1> { this. props. children } </ section> );
  23. 23. class Mycomponent extends React. Component { render() { return <div>{ this. props. title }</ div>; } MyComponent. propTypes = { title: React. PropTypes. string. isRequired, content: React. PropTypes. instanceOf(. ..),
  24. 24. 0 class Mycomponent extends React. Component { constructor(props) { this. state = { label: ‘Click me’ }; } render() { return ( <button onClick= { this. _handle. bind(this) }> . { this. state. label } </ button> ); } _handle() { this. setState({ label: ‘Clicked’ });
  25. 25. Creating, defining, Components render components logic Top level API Components API
  26. 26. React. Component (E S6) * top level React. createClass (ES5) React. createElement (ES5) React. cloneElement (ES5) React. createFactory (ES5) React. isValidElement (ES5) React. DOM. (ES5) React. PropTypes React. Children ReactDOM. render ReactDOM. unmountComponentAtNode ReactDOM. findDOMNode ReactDOMServer. renderToString ReactDOMServer. renderTo. StaticMarkup nf"
  27. 27. .; J(; l". r'p‘. f'. :.r. ..r. J‘1‘! lift: l;ir’.4‘!7t: ..r: '.I1;+ QIE 3:‘ l 91;! ’ ‘Ififi ‘r1:. r;‘u; + ; r1;t: i.lr; nc4;r€ii+; jfih; + ; i‘t: x,r? c4%iV_‘Fi: I<iJt*. -.. r:‘u; + as‘: -;_r ni f_1m, ; Hike : L£_w_E«:1:; n;r: h;«~'il. §i; i‘. I[-E ‘. _r.1<: i'. L‘ 1;’. ;r4;rx_?1.i; nca5ai. F. ‘. .H*: ‘!: is F, «v »£'X§i‘! '.-l1;I; i‘&ra£1l. ;Ei. I_¥irltilfls rt- f,3h: - » « ‘ vi; Iltllaltli fr. ‘ v. vr: r:£; £;m«: II C; £;t: ._i‘. I- : x«; u.u; :;r_: f-T 'A'f“i1T. ILl1:J. ;€; n_l'i: ‘lmili- ‘ " i n: xl; x;I. .;‘. r;l i: lC. LVLR'-f‘CI. ?lLlJ. ''r , . In 'fx«: m;Lr. .nr, WI: El; Eh; :c4;: lv/ ;l; F: :21 t: F‘, '2 ,1: I ]; —1 1 _ 3- 3- 1.: ii a n Jri fir. ‘ . _ 42 4: 1:‘ -I bu , 1- 1.- :1.; k«: ‘._l*f"i«; )Le: ;nL: It: x,t: ..u; I.t: ..Iiiv1lfi‘l‘: _; n: ‘., h:. .r; ‘.n; + ‘g‘I<; ),: :._n; I.c. _IiT’V; 'f: lY ‘ ‘ “ Z (‘I '2 —1 ~ KT‘-)_F. :'§ J. FEISJ» "‘ H9)jn; u_gxu. -_xa_o_ii»
  28. 28. * lock-in templates * it’s not a framework
  29. 29. I U F
  30. 30. F‘ m1,-»= .titc1‘uar~ 2 / ~- 9'f(! lK‘g’ I v’l: |'. ' ‘nf ("x .
  31. 31. >. ._. y : ’ ‘ . .x ~. «»/ '~’*“‘v5« ~—-v‘ . -w 2‘ . .. _ c n l(| ‘m$l , .x: 2 . n «: I.. I__. L . r _ _. . . _ _j , ».~‘-». ?.'3.. .‘Oi. ;-. -.: «. z. ,:,
  32. 32. . “in” "ii https: //facebook. github. io/ immutable-j s/ var Immutable = require('immutable'); Var mapl = Immutable. Map({a:1, b:2, c:5}); var map2 = map 1.set('b', 50); map1.get('b'); // 2. map. ?.. get('b'); // 50
  33. 33. http: //flowtype. org/ function foo(x: string, y: number): string { return x. length * y; } foo('Hello', 42.);
  34. 34. https: //facebook. github. io/ re1ay/ “Relay lets you mutate data on the client and server using GraphQL mutations”

×