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.

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

August 25, 2018
Tweet

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