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

React.js for WordPress Developers

React.js for WordPress Developers

75fb365927cb3f5f7b677682d6249406?s=128

Nikolay Bachiyski

April 16, 2016
Tweet

Transcript

  1. N I KO L AY B A C H I

    Y S K I , A U TO M AT T I C , W O R D C A M P H E L S I N K I , A P R I L 1 6 , 2 0 1 6
  2. None
  3. A U TO M AT T I C

  4. A U TO M AT T I C E X

    T R A P O L AT E . M E
  5. A U TO M AT T I C E X

    T R A P O L AT E . M E @ N I KO L AY B
  6. R E S T A P I

  7. R E S T A P I CALYPSO

  8. R E S T A P I ↓ S I

    N G L E - PA G E A P P S
  9. W H Y ?

  10. None
  11. FA S T E R

  12. None
  13. M O R E E N G A G I

    N G
  14. None
  15. None
  16. C H A N G E L E T '

    S TA L K A B O U T
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. S TAT E L E T ' S TA L

    K A B O U T
  24. None
  25. None
  26. None
  27. C L A S S I C V S .

    S I N G L E - PA G E A P P S
  28. C L A S S I C

  29. None
  30. None
  31. C H A N G E 㱺 R E F

    R E S H C L A S S I C
  32. C H A N G E 㱺 S I N

    G L E - PA G E
  33. C H A N G E 㱺 S I N

    G L E - PA G E
  34. None
  35. None
  36. U I L I B R A RY

  37. N OT A F R A M E W O

    R K
  38. U I L I B R A RY

  39. const Post = React.createClass( { render() { return ( <div

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  40. const Post = React.createClass( { render() { return ( <div

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  41. const Post = React.createClass( { render() { return ( <div

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } ); J SX
  42. const Post = React.createClass( { function render() { return (

    React.DOM.div( {className: 'post'}, [ React.DOM.p( null, this.props.post.content ), PostMeta( {post: this.props.post} ) ); ); } } );
  43. const Post = React.createClass( { render() { return ( <div

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  44. const PostMeta = React.createClass( { … } );

  45. const Post = React.createClass( { render() { return ( <div

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  46. const PostMeta = React.createClass( { getInitialState() { return { hidden:

    true }; }, onToggle() { this.setState( { hidden: ! this.state.hidden } ); }, render() { return ( <div className="meta"> { this.props.post.author } <button onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); } } );
  47. const PostMeta = React.createClass( { getInitialState() { return { hidden:

    true }; }, onToggle() { this.setState( { hidden: ! this.state.hidden } ); }, render() { return ( <div className="meta"> { this.props.post.author } <button onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); } } );
  48. const PostMeta = React.createClass( { getInitialState() { return { hidden:

    true }; }, onToggle() { this.setState( { hidden: ! this.state.hidden } ); }, render() { return ( <div className="meta"> { this.props.post.author } <button onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); } } );
  49. const PostMeta = React.createClass( { getInitialState() { return { hidden:

    true }; }, onToggle() { this.setState( { hidden: ! this.state.hidden } ); }, render() { return ( <div className="meta"> { this.props.post.author } <button onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); } } );
  50. const PostMeta = React.createClass( { getInitialState() { return { hidden:

    true }; }, onToggle() { this.setState( { hidden: ! this.state.hidden } ); }, render() { return ( <div className="meta"> { this.props.post.author } <button onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); } } ); R E - R E N D E RS
  51. C O M P O N E N T S

    L E T ' S TA L K A B I T M O R E A B O U T
  52. C O M P O S A B L E

  53. <MasterBar> <UserGreeting user="…"> <Avatar login={ this.props.user.login } /> Howdy, {

    this.props.user.nickname } <LogOutLink id={ this.props.user.id } /> </UserGreeting> </MasterBar>
  54. B U I L D I N G B LO

    C KS O F O U R A P P L I C AT I O N
  55. <MasterBar /> <MastHead /> <Navigation active="archive" /> <Posts date="2015-04-01" author="crumb">

    <Post> … </Post> <Post> … </Post> … </Posts>
  56. const Post = React.createClass( { … <p class="content"> { this.props.post.content}

    </p> <PostMeta post="…" /> …
  57. None
  58. T E S TA B L E

  59. P R E V E N T S XS S

  60. <p>{ this.props.content }</p> <img src="javascript:alert('XSS');"> &lt;img src=&quot;javascript:alert(&#39;XSS&#39;);&quot;&gt;

  61. <p dangerouslySetInnerHTML={{ __html: this.props.content }} />

  62. N OT T E M P L AT E S

  63. <div class="posts"> {{#each posts}} <div class="post"> {{#if author}} </div> {{/each}}

    {{^posts}} Not Found {{/posts}} </div>
  64. R E U S A B L E

  65. <Comment> <Avatar email={ this.props.comment.author.email } /> … </Comment>

  66. <PostMeta> <Avatar email={ this.props.comment.author.email} /> … </PostMeta>

  67. AV ATA R = I M G + H O

    V E R J S
  68. W A I T!

  69. K E E P LO G I C A N

    D M A R K U P … A P O P U L A R B E S T P R A C T I C E S A Y S …
  70. … S E PA R AT E !

  71. S E PA R AT I O N O F

    C O N C E R N S I S G O O D, R I G H T ?
  72. W H E N D O W E N E

    E D A N E V E N T H A N D L E R W I T H O U T T H E D O M E L E M E N T I T I S B O U N D TO ?
  73. W H E N D O W E N E

    E D A N E V E N T H A N D L E R W I T H O U T T H E D O M E L E M E N T I T I S B O U N D TO ? onClick() <button>
  74. W H E N D O W E N E

    E D A D O M E L E M E N T W I T H O U T T H E E V E N T H A N D L E R S F O R I T S A C T I O N S ? onClick() <button>
  75. H TM L

  76. D I S P L AY LO G I C

  77. T H E S A M E C O N

    C E R N
  78. H TM L J S

  79. H TM L

  80. D I S P L AY LO G I C

  81. T H E S A M E C O N

    C E R N
  82. None
  83. None
  84. None
  85. R E - R E N D E R I

    N G
  86. None
  87. None
  88. None
  89. None
  90. V I R T U A L D O M

  91. 0 . R U N r e n d e

    r ( ) O N E V E RY U P D A T E
  92. 1 . D I F F W I T H

    P R E V I O U S T R E E O N E V E RY U P D A T E
  93. http://calendar.perfplanet.com/2013/diff/

  94. 2 . CO M P U T E M I

    N I M U M S E T O F D O M C H A N G E S O N E V E RY U P D A T E
  95. 3 . B ATC H - E X E C

    U T E A L L D O M U P D AT E S O N E V E RY U P D A T E
  96. V I R T U A L D O M

    : N OT O N LY S P E E D!
  97. S E R V E R-S I D E R

    E N D E R I N G
  98. S V G , V M L , C A

    N V A S
  99. R U N N I N G I N A

    W E B W O R K E R
  100. D E C L A R AT I V E

  101. None
  102. None
  103. sample

  104. M A G I C!

  105. None
  106. render() { return ( <div className="meta"> { this.props.post.author } <button

    onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); }
  107. render() { return ( <div className="meta"> { this.props.post.author } <button

    onClick={ this.onToggle }> { this.state.hidden ? 'More' : 'Hide' } </button> ( this.state.hidden ? <p>…extra meta…</p> : null ) </div> ); }
  108. None
  109. None
  110. RO U T E R + S TAT E http://redux.js.org

    https://github.com/reactjs/react-router https://egghead.io
  111. N OT A F R A M E W O

    R K
  112. A RC H I T E C T U R

    E
  113. http:/ /github.com/Automattic/wp-calypso

  114. L E T ' S C H AT

  115. S U M M A RY

  116. C O M P O N E N T S

    , N OT T E M P L AT E S
  117. R E - R E N D E R ,

    D O N ' T TO U C H T H E D O M
  118. V I R T U A L D O M

    I S S I M P L E , FA S T, F U N L E T ' S TA L K A B O U T
  119. C O N T R I B U TO R

    D AY!
  120. Q U E S T I O N S ?

    @ N I KO L AY B