React for Gutenberg, WordPress & Beyond - WordCamp Omaha 2018

In this talk, educator Zac Gordon, talks about the migration of React into WordPress Core and what developers should know about it. We look at practical examples and things to know for using React with Gutenberg as well as in your own plugins and themes outside the editor. We will also discuss how React on the server, in native applications and in 360 or VR environments might play a role in time to come. If you don't know much React yet this will be a great introduction, and more experienced devs will get some ideas for interesting use cases for React and WordPress. Zac is the creator of two Gutenberg courses: Gutenberg Block Development w React and Theming with Gutenberg.

Transcript

1. javascriptforwp.com/omaha @zgordon React for Gutenberg, WordPress & Beyond w Zac Gordon
2. javascriptforwp.com/omaha @zgordon Zac Gordon zacgordon.com
3. javascriptforwp.com/omaha @zgordon React is a User Interface Library
4. @zgordon javascriptforwp.com/omaha React is JavaScript, but end result may not be JavaScript
5. @zgordon javascriptforwp.com/omaha React companion libraries: ReactDOM, ReactDOMServer React Native, React 360
6. @zgordon javascriptforwp.com/omaha React often leverages build tools to do this
7. javascriptforwp.com/omaha @zgordon Why React for WordPress?
8. @zgordon javascriptforwp.com/omaha Matt Mullenweg 2015 "Learn JavaScript Deeply”
9. @zgordon javascriptforwp.com/omaha Automattic’s Calypso: JS driven WP.com admin
10. @zgordon javascriptforwp.com/omaha Automattic’s team started building Gutenberg in React
11. @zgordon javascriptforwp.com/omaha There was no compelling reason to stop using React
12. @zgordon javascriptforwp.com/omaha Decided to create an abstraction layer for React
13. javascriptforwp.com/omaha @zgordon React in WordPress
14. @zgordon javascriptforwp.com/omaha Import React & ReactDOM and export wp.element
15. @zgordon javascriptforwp.com/omaha wp.element is saved in the global scope
16. @zgordon javascriptforwp.com/omaha Destructure, don’t import
17. @zgordon javascriptforwp.com/omaha Getting React // Pure React import React from “react”; import ReactDOM from “react-dom”; // WordPress React const { createElement, render } = wp.element;
18. @zgordon javascriptforwp.com/omaha React is only enqueued on Gutenberg Editor admin pages
19. @zgordon javascriptforwp.com/omaha Including React on the Frontend add_action( ‘wp_enqueue_scripts', 'my_enqueue_js' ); function my_enqueue_js() { wp_enqueue_script( 'needsreact', get_template_directory_uri() . '/js/needs-react.js', [ 'wp-element' ] ); }
20. javascriptforwp.com/omaha @zgordon JSX in WordPress
21. @zgordon javascriptforwp.com/omaha JSX lets you write HTML in your JavaScript
22. @zgordon javascriptforwp.com/omaha Non-JSX vs. JSX // Non JSX React.createElement("p", { className: "featured" }, "Hello"); // JSX <p className=“featured">Hello</p>
23. @zgordon javascriptforwp.com/omaha Non-JSX vs. JSX // Non JSX React.createElement( "h1", { className: "welcome" }, React.createElement( "a", { className: "link" , href: “https://reactjs.org/“}, "Welcome!") ); // JSX <h1 class=“welcome”> <a class=“link” href=“https://reactjs.org/“>Welcome!</a> </h1>
24. @zgordon javascriptforwp.com/omaha JSX requires transpiling
25. @zgordon javascriptforwp.com/omaha To transpile JSX we use Babel
26. @zgordon javascriptforwp.com/omaha Oh yeah, you also need NPM & webpack
27. javascriptforwp.com/omaha @zgordon Redux in WordPress
28. @zgordon javascriptforwp.com/omaha Redux helps JS apps manage state
29. @zgordon javascriptforwp.com/omaha With Redux you can get data & subscribe to changes
30. @zgordon javascriptforwp.com/omaha Like React, Redux is abstracted in WordPress
31. @zgordon javascriptforwp.com/omaha The data module is built upon and shares many of the same core principles of Redux, but shouldn’t be mistaken as merely Redux for WordPress, as it includes a few of its own distinguishing characteristics. wordpress.org/gutenberg/handbook/packages/packages-data/
32. javascriptforwp.com/omaha @zgordon React in WP (immediate future)
33. javascriptforwp.com/omaha @zgordon React in WP (next few years)
34. javascriptforwp.com/omaha @zgordon Do I Need to Learn All of This?
35. javascriptforwp.com/omaha @zgordon 20% OFF Coupon “WCOMAHA” Q&A