Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React for Gutenberg, WordPress & Beyond - WordCamp Omaha


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React for Gutenberg, WordPress & Beyond - WordCamp Omaha

  1. 1. @zgordon React for Gutenberg, WordPress & Beyond w Zac Gordon
  2. 2. @zgordon Zac Gordon
  3. 3. @zgordon React is a User Interface Library
  4. 4. React is JavaScript, but end result may not be JavaScript
  5. 5. React companion libraries: ReactDOM, ReactDOMServer React Native, React 360
  6. 6. React often leverages build tools to do this
  7. 7. @zgordon Why React for WordPress?
  8. 8. Matt Mullenweg 2015 "Learn JavaScript Deeply”
  9. 9. Automattic’s Calypso: JS driven admin
  10. 10. Automattic’s team started building Gutenberg in React
  11. 11. There was no compelling reason to stop using React
  12. 12. Decided to create an abstraction layer for React
  13. 13. @zgordon React in WordPress
  14. 14. Import React & ReactDOM and export wp.element
  15. 15. wp.element is saved in the global scope
  16. 16. Destructure, don’t import
  17. 17. Getting React // Pure React import React from “react”; import ReactDOM from “react-dom”; // WordPress React const { createElement, render } = window.wp.element;
  18. 18. React is only enqueued on Gutenberg Editor admin pages
  19. 19. 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. 20. @zgordon JSX in WordPress
  21. 21. JSX lets you write HTML in your JavaScript
  22. 22. Non-JSX vs. JSX // Non JSX React.createElement("p", { className: "featured" }, "Hello"); // JSX <p className=“featured">Hello</p>
  23. 23. 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. 24. JSX requires transpiling
  25. 25. To transpile JSX we use Babel
  26. 26. Oh yeah, you also need NPM & webpack
  27. 27. @zgordon Redux in WordPress
  28. 28. Redux helps JS apps manage state
  29. 29. With Redux you can get data & subscribe to changes
  30. 30. Like React, Redux is abstracted in WordPress
  31. 31. 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. 32. @zgordon React in WP (immediate future)
  33. 33. @zgordon React in WP (next few years)
  34. 34. @zgordon Do I Need to Learn All of This?
  35. 35. @zgordon 20% OFF Coupon “WCOMAHA” Q&A