React-ing to WordPress (WCNYC '16)

React’s been taking the tech world by storm. WordPress developers have been tasked with “Learning JavaScript deeply” — and React is a great JavaScript tool to know. With the WordPress REST API in development, combining React and WordPress is becoming easier. In this talk we’ll review React and some related tools, talk about who’s already using it, and explore how you can use React in WordPress (and why you may or may not want to).

Transcript

2. @ryelle | #wcnyc kelly dwan automattic @ryelle ryelle.codes
3. @ryelle | #wcnyc React?
4. @ryelle | #wcnyc
5. @ryelle | #wcnyc
6. @ryelle | #wcnyc var Hello = React.createClass( { render: function() { return ( <div>Hello {this.props.name}</div> ); } } ); ReactDOM.render( <Hello name="World" />, document.getElementById('container') );
7. @ryelle | #wcnyc var Hello = React.createClass( { render: function() { return ( <div>Hello {this.props.name}</div> ); } } ); ReactDOM.render( <Hello name="World" />, document.getElementById('container') ); Hello World
8. @ryelle | #wcnyc var Hello = React.createClass( { render: function() { return ( <div>Hello {this.props.name}</div> ); } } ); ReactDOM.render( <Hello name="Sara" />, document.getElementById('container') ); Hello Sara
9. @ryelle | #wcnyc React.createClass( { propTypes: { isEnabled: React.PropTypes.bool, onThingClick: React.PropTypes.func, count: React.PropTypes.number, title: React.PropTypes.string.isRequired }, …
10. @ryelle | #wcnyc var TodoApp = React.createClass( { getInitialState: function() { return { nowShowing: app.ALL_TODOS, editing: null, newTodo: '' }; }, handleChange: function( event ) { this.setState( { newTodo: event.target.value } ); } …
11. @ryelle | #wcnyc • propTypes • code standards: eslint • JSX is not HTML • javascript testing React Standards
12. @ryelle | #wcnyc Who's using React?
14. http://tri.be/blog/redux-react-and-the-wordpress-rest-api-v2/
15. https://ustwo.com/blog/open-sourcing-our-website
16. https://adayofrest.hm/london-2016/news/a-react-wordpress-theme/
18. https://github.com/versionpress/versionpress/
19. www.elegantthemes.com/blog/category/divi-resources
20. http://getonepager.com/
21. @ryelle | #wcnyc React-adjacent technology
22. @ryelle | #wcnyc
23. @ryelle | #wcnyc
24. @ryelle | #wcnyc flux
25. @ryelle | #wcnyc state actions reducers selectors egghead.io
26. @ryelle | #wcnyc
27. @ryelle | #wcnyc in-browser storage
28. @ryelle | #wcnyc
29. @ryelle | #wcnyc
30. @ryelle | #wcnyc React + WordPress
31. @ryelle | #wcnyc REST API!
32. @ryelle | #wcnyc REST API
33. @ryelle | #wcnyc REST API?
34. @ryelle | #wcnyc React + WordPress
35. @ryelle | #wcnyc widgets
36. https://github.com/gcorne/wp-react-boilerplate
37. @ryelle | #wcnyc admin UIs
39. @ryelle | #wcnyc themes
40. https://github.com/ryelle/Anadama-React
41. https://github.com/ryelle/Foxhound/
42. ?
43. @ryelle | #wcnyc ?
44. @ryelle | #wcnyc child themes
45. @ryelle | #wcnyc standalone apps
48. @ryelle | #wcnyc +? -?
49. @ryelle | #wcnyc The Future
50. @ryelle | #wcnyc API == non-PHP development
51. @ryelle | #wcnyc design
52. @ryelle | #wcnyc accessibility?
53. @ryelle | #wcnyc server-side rendering?
54. @ryelle | #wcnyc Thanks!
55. @ryelle | #wcnyc Questions?
56. @ryelle | #wcnyc resources http://todomvc.com/examples/react/ https://facebook.github.io/react/ https://egghead.io/courses/getting-started-with-redux https://speakerdeck.com/jacklenox/there-and-back-again-a-developers-tale http://blog.andrewray.me/reactjs-for-stupid-people/ http://kadamwhite.github.io/talks/2016/wp-as-data-csvconf/ http://webaim.org/ https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it- matters/