React.js for WordPress Developers

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
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 ?
11. FA S T E R
13. M O R E E N G A G I N G
16. C H A N G E L E T ' S TA L K A B O U T
23. S TAT E L E T ' S TA L K A B O U T
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
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
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="…" /> …
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
85. R E - R E N D E R I N G
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
103. sample
104. M A G I C!
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> ); }
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