Save 37% off PRO during our Black Friday Sale! »

React for Gutenberg, WordPress & Beyond - WordCamp Omaha 2018

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
August 25, 2018

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.


Zac Gordon

August 25, 2018


  1. @zgordon React for Gutenberg, WordPress & Beyond w Zac

  2. @zgordon Zac Gordon

  3. @zgordon React is a User Interface Library

  4. @zgordon React is JavaScript, but end result may not

    be JavaScript
  5. @zgordon React companion libraries: ReactDOM, ReactDOMServer React Native, React

  6. @zgordon React often leverages build tools to do this

  7. @zgordon Why React for WordPress?

  8. @zgordon Matt Mullenweg 2015 "Learn JavaScript Deeply”

  9. @zgordon Automattic’s Calypso: JS driven admin

  10. @zgordon Automattic’s team started building Gutenberg in React

  11. @zgordon There was no compelling reason to stop using

  12. @zgordon Decided to create an abstraction layer for React

  13. @zgordon React in WordPress

  14. @zgordon Import React & ReactDOM and export wp.element

  15. @zgordon wp.element is saved in the global scope

  16. @zgordon Destructure, don’t import

  17. @zgordon Getting React // Pure React import React from

    “react”; import ReactDOM from “react-dom”; // WordPress React const { createElement, render } = wp.element;
  18. @zgordon React is only enqueued on Gutenberg Editor admin

  19. @zgordon 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. @zgordon JSX in WordPress

  21. @zgordon JSX lets you write HTML in your JavaScript

  22. @zgordon Non-JSX vs. JSX // Non JSX React.createElement("p", {

    className: "featured" }, "Hello"); // JSX <p className=“featured">Hello</p>
  23. @zgordon Non-JSX vs. JSX // Non JSX React.createElement( "h1",

    { className: "welcome" }, React.createElement( "a", { className: "link" , href: ““}, "Welcome!") ); // JSX <h1 class=“welcome”> <a class=“link” href=““>Welcome!</a> </h1>
  24. @zgordon JSX requires transpiling

  25. @zgordon To transpile JSX we use Babel

  26. @zgordon Oh yeah, you also need NPM & webpack

  27. @zgordon Redux in WordPress

  28. @zgordon Redux helps JS apps manage state

  29. @zgordon With Redux you can get data & subscribe

    to changes
  30. @zgordon Like React, Redux is abstracted in WordPress

  31. @zgordon 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.
  32. @zgordon React in WP (immediate future)

  33. @zgordon React in WP (next few years)

  34. @zgordon Do I Need to Learn All of This?

  35. @zgordon 20% OFF Coupon “WCOMAHA” Q&A