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

110 views

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

×