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.

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. @zgordonjavascriptforwp.com/omaha
React is JavaScript, but
end result may not be
JavaScript

5. @zgordonjavascriptforwp.com/omaha
React companion libraries:
ReactDOM, ReactDOMServer
React Native, React 360

6. @zgordonjavascriptforwp.com/omaha
React often leverages
build tools to do this

7. javascriptforwp.com/omaha @zgordon
Why React
for WordPress?

8. @zgordonjavascriptforwp.com/omaha
Matt Mullenweg 2015
"Learn JavaScript Deeply”

9. @zgordonjavascriptforwp.com/omaha
Automattic’s Calypso:
JS driven WP.com admin

10. @zgordonjavascriptforwp.com/omaha
Automattic’s team started
building Gutenberg in React

11. @zgordonjavascriptforwp.com/omaha
There was no compelling
reason to stop using React

12. @zgordonjavascriptforwp.com/omaha
Decided to create an
abstraction layer for React

13. javascriptforwp.com/omaha @zgordon
React in
WordPress

14. @zgordonjavascriptforwp.com/omaha
Import React & ReactDOM
and export wp.element

15. @zgordonjavascriptforwp.com/omaha
wp.element is saved
in the global scope

16. @zgordonjavascriptforwp.com/omaha
Destructure,
don’t import

17. @zgordonjavascriptforwp.com/omaha
Getting React
// Pure React
import React from “react”;
import ReactDOM from “react-dom”;
// WordPress React
const { createElement, render } = window.wp.element;

18. @zgordonjavascriptforwp.com/omaha
React is only enqueued
on Gutenberg Editor
admin pages

19. @zgordonjavascriptforwp.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. @zgordonjavascriptforwp.com/omaha
JSX lets you write
HTML in your JavaScript

22. @zgordonjavascriptforwp.com/omaha
Non-JSX vs. JSX
// Non JSX
React.createElement("p", { className: "featured" }, "Hello");
// JSX
<p className=“featured">Hello</p>

23. @zgordonjavascriptforwp.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. @zgordonjavascriptforwp.com/omaha
JSX requires transpiling

25. @zgordonjavascriptforwp.com/omaha
To transpile JSX
we use Babel

26. @zgordonjavascriptforwp.com/omaha
Oh yeah, you also need
NPM & webpack

27. javascriptforwp.com/omaha @zgordon
Redux in
WordPress

28. @zgordonjavascriptforwp.com/omaha
Redux helps JS apps
manage state

29. @zgordonjavascriptforwp.com/omaha
With Redux you can
get data &
subscribe to changes

30. @zgordonjavascriptforwp.com/omaha
Like React,
Redux is abstracted in
WordPress

31. @zgordonjavascriptforwp.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