Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using React with the WordPress API

Using React with the WordPress API

WordCamp talk on getting started using React in plugins and themes

Eric Debelak

January 20, 2018

More Decks by Eric Debelak

Other Decks in Technology


  1. About me • I’m Eric Debelak • I’m a Senior

    Developer/co-founder at 11 online • I started in WordPress in 2004 • These days I work mostly in React.js on the front end and either python (Flask) or PHP (Lumen) on the backend. I also do some Android dev and, of course, WordPress. I started using React.js about 2 years ago.
  2. What we are going to do today • Brief intro

    to React • Brief intro to WP API • Go over a simple example of how to use the two in a traditional PHP templated WP site
  3. React.JS • Not a framework, but uses libraries to build

    a js front end • Since it isn’t a framework, lots of ways people build with it • I like to think of React.js as a way to build predictable user interfaces based on the state (or data) of the app. As your data changes, so does the presentation.
  4. WordPress Rest API • Now a part of WordPress core

    • Unlike admin-ajax.php, bypasses much of WP core, and is therefore faster • Many built-in endpoints, but easy to write custom ones as well
  5. Easiest way to get started with React.js Create React App!!!

    Deals with: • Build process • Local server • File watcher • Hot reloading while in development Learn more here: https://github.com/facebookincubator/create-react-app
  6. Why React and the WP API? You mean besides being

    sexy? Our example was pretty simple, one that wouldn’t be terrible to implement in jQuery. But the more complex our ui gets, the bigger gains we get with React. Why? We are just updating the state and let React deal with the ui instead of manipulating each piece of ui whenever anything changes. For example, what if we add up/down votes on reviews? Or comments on reviews?