React.js for WordPress Developers

React.js for WordPress Developers

75fb365927cb3f5f7b677682d6249406?s=128

Nikolay Bachiyski

April 16, 2016
Tweet

Transcript

  1. 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. 2.
  3. 4.

    A U TO M AT T I C E X

    T R A P O L AT E . M E
  4. 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
  5. 8.

    R E S T A P I ↓ S I

    N G L E - PA G E A P P S
  6. 9.
  7. 10.
  8. 12.
  9. 14.
  10. 15.
  11. 16.

    C H A N G E L E T '

    S TA L K A B O U T
  12. 17.
  13. 18.
  14. 19.
  15. 20.
  16. 21.
  17. 22.
  18. 23.
  19. 24.
  20. 25.
  21. 26.
  22. 27.

    C L A S S I C V S .

    S I N G L E - PA G E A P P S
  23. 29.
  24. 30.
  25. 31.

    C H A N G E 㱺 R E F

    R E S H C L A S S I C
  26. 32.

    C H A N G E 㱺 S I N

    G L E - PA G E
  27. 33.

    C H A N G E 㱺 S I N

    G L E - PA G E
  28. 34.
  29. 35.
  30. 39.

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

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  31. 40.

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

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  32. 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
  33. 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} ) ); ); } } );
  34. 43.

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

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  35. 45.

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

    className="post"> <p className="content"> { this.props.post.content } </p> <PostMeta post={ this.props.post } /> </div> ); } } );
  36. 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> ); } } );
  37. 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> ); } } );
  38. 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> ); } } );
  39. 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> ); } } );
  40. 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
  41. 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
  42. 53.

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

    this.props.user.nickname } <LogOutLink id={ this.props.user.id } /> </UserGreeting> </MasterBar>
  43. 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
  44. 57.
  45. 67.
  46. 68.
  47. 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 …
  48. 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 ?
  49. 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 ?
  50. 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>
  51. 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>
  52. 75.
  53. 77.
  54. 79.
  55. 81.
  56. 82.
  57. 83.
  58. 84.
  59. 86.
  60. 87.
  61. 88.
  62. 89.
  63. 91.

    0 . R U N r e n d e

    r ( ) O N E V E RY U P D A T E
  64. 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
  65. 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
  66. 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
  67. 96.

    V I R T U A L D O M

    : N OT O N LY S P E E D!
  68. 97.

    S E R V E R-S I D E R

    E N D E R I N G
  69. 98.
  70. 99.

    R U N N I N G I N A

    W E B W O R K E R
  71. 101.
  72. 102.
  73. 103.
  74. 104.
  75. 105.
  76. 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> ); }
  77. 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> ); }
  78. 108.
  79. 109.
  80. 110.

    RO U T E R + S TAT E http://redux.js.org

    https://github.com/reactjs/react-router https://egghead.io
  81. 116.

    C O M P O N E N T S

    , N OT T E M P L AT E S
  82. 117.

    R E - R E N D E R ,

    D O N ' T TO U C H T H E D O M
  83. 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
  84. 120.

    Q U E S T I O N S ?

    @ N I KO L AY B