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
Tweet

More Decks by Eric Debelak

Other Decks in Technology

Transcript

  1. Using React with the
    WordPress API
    How to QUICKLY (we only have 30 mins!) get started

    View Slide

  2. 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.

    View Slide

  3. 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

    View Slide

  4. 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.

    View Slide

  5. 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

    View Slide

  6. 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

    View Slide

  7. Let’s get coding
    Live demo, what could go wrong?
    https://github.com/11online/react-wp-plugin-demo

    View Slide

  8. 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?

    View Slide

  9. Questions?
    [email protected]

    View Slide