Steve Loar gave a presentation on powering up WordPress user interfaces with the WP-API and React.js. He began by introducing himself and his background. He then provided an overview of REST APIs and how the WP-API plugin allows WordPress resources like posts, pages, and media to be accessed via REST. Loar demonstrated setting up a basic project with React, Redux, and Webpack to build a simple quotes display pulling from the WordPress API. He concluded by noting there is more to learn but the fundamentals were covered to get started with this technique.

1. POWER-UP YOUR
UI WITH WP-API
Steve Loar

2. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WHO AM I?
▸ Consultant - Working with Ruby on
Rails, WordPress, React, and more.
▸ Craftsman - Over 20 years of
crafting software solutions for large
and small companies.
▸ Cowboy - Riding horses and
competing in barrel racing and pole
bending.
▸ Connoisseur - Lover of fine coffee
and craft beer.

3. POWER-UP YOUR UI WITH WP-API AND REACT.JS
LETS TALK ABOUT WORDPRESS AND
REACT
“It’s too hard. I don’t want to!”
Source: http://www.laurenmarinigh.com/job-hunt-frustration/

4. POWER-UP YOUR UI WITH WP-API AND REACT.JS
BUT IT’S NOT HARD, IT’S REST-FUL
Source: Noon, rest from work by Van Gogh

5. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WHAT IS REST?
▸REST stands for Representational State Transfer.
▸It is an architectural style for networked applications using
HTTP.
▸It can perform all CRUD operations via GET, POST, PUT,
and DELETE.
▸Information is passed between clients and servers in either
XML or JSON formats.

6. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WHY
WOULD I
WANT TO
USE REST
IN
WORDPRES
S?
You can build interfaces for
both Web and Mobile, while
letting your site admins
keep the interface they
know and love.
Source: https://www.withfriendship.com/user/pintu/representational-state-transfer.php
Mobile
Web

7. POWER-UP YOUR UI WITH WP-API AND REACT.JS
INSTALL AND ACTIVATE THE
WORDPRESS REST API PLUGIN
Source: https://wordpress.org/plugins/

8. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WORDPRESS RESOURCES AVAILABLE
TO WP-API
▸Posts, Post revisions, Post types, Post statuses
▸Pages
▸Media
▸Comments
▸Users
▸Taxonomies, Categories, and Tags

9. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WE WILL ONLY LOOK AT THE POSTS
▸Make sure that your Permalink settings are set to “Post
name”.
▸Create and publish some posts.
▸You’re done. The plugin does the heavy lifting for you.

10. POWER-UP YOUR UI WITH WP-API AND REACT.JS
LET’S EXPLORE THE API WITH
POSTMAN
▸https://www.getpostman.com/
▸Postman is free, as a Chrome app or a Mac app.
▸It lets you interact with the WP-API plugin.
Source: https://www.getpostman.com/

11. POWER-UP YOUR UI WITH WP-API AND REACT.JS
THE POSTMAN INTERFACE

12. POWER-UP YOUR UI WITH WP-API AND REACT.JS
OUR PROJECT GOAL TODAY: A SIMPLE
QUOTES DISPLAY

13. LET’S
DABBLE
IN THE
DARK
ARTS
REACT, REDUX
AND, WEBPACK,
OH MY!
Source: The Wizard of Oz

14. POWER-UP YOUR UI WITH WP-API AND REACT.JS
OUR JOURNEY BEGINS WITH NPM
▸NPM is a package manager that will handle the install of the
JavaScript libraries that will power our project.
▸It comes with Node.js, which we also need.
▸Node.js should be installed via Homebrew on a Mac.
▸Homebrew needs Xcode and its command line tools to work.
▸Sounds complex, but as a developer, you probably know all
this already.

15. POWER-UP YOUR UI WITH WP-API AND REACT.JS
PROJECT SETUP
▸Open a terminal window
▸Navigate to the top level WordPress folder
▸Create a new folder named quotes, and navigate into it
▸Type ‘npm init’ and answer the questions it asks
▸You are now ready to install the packages to use in the
project
▸We will look at the main ones in this talk

16. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WEBPACK
▸A module bundler - think compiler. It’s main purpose is to
take your project assets and create a JavaScript file
▸To do this it can utilize the following
▸Plugins - to extend Webpack
▸Loaders - to process ES6, SASS, etc.
▸Code Splitting - to allow code loading on demand
▸Performance Optimization - caching and faster builds

17. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WEBPACK.CONFIG.JS
The entry file, the output
file, and some plugins

18. POWER-UP YOUR UI WITH WP-API AND REACT.JS
WEBPACK.CONFIG.JS
Loaders handling ES6
and SASS

19. POWER-UP YOUR UI WITH WP-API AND REACT.JS
REDUX
▸A state container - a single repository of all application data
▸Data never changes directly, but is re-created via Reducers.
▸Reducers are activated via ActionCreators
▸The idea is that data flows down to UI components, and
actions are sent up from UI components

20. POWER-UP YOUR UI WITH WP-API AND REACT.JS
CREATING A REDUX
STORE

21. POWER-UP YOUR UI WITH WP-API AND REACT.JS
ACTION CREATORS

22. POWER-UP YOUR UI WITH WP-API AND REACT.JS
QUOTE REDUCER

23. POWER-UP YOUR UI WITH WP-API AND REACT.JS
REACT-ROUTER
▸Allows URL routes to work in our app

24. POWER-UP YOUR UI WITH WP-API AND REACT.JS
REACT
▸Not a framework, just a library; so it needs the previous stuff
to do anything
▸Just the view part of the app
▸Code is broken down into JSX components which compile
into JavaScript
▸Uses a “Virtual DOM”; an in memory copy of the DOM
▸One way data flow; data in, actions out

25. POWER-UP YOUR UI WITH WP-API AND REACT.JS
APP.JS WIRES THINGS TOGETHER

26. POWER-UP YOUR UI WITH WP-API AND REACT.JS
MAIN.JS ACTS AS OUR PAGE LAYOUT

27. POWER-UP YOUR UI WITH WP-API AND REACT.JS
QUOTEGRID.JS IS OUR HOME VIEW

28. POWER-UP YOUR UI WITH WP-API AND REACT.JS
QUOTES.JS IS OUR SINGLE ITEM VIEW

29. POWER-UP YOUR UI WITH WP-API AND REACT.JS
OVERWHELMED YET? - WE ARE
ALMOST DONE
Source: http://www.sunsigns.org/9-reasons-why-you-may-feel-sleepy-at-work/

30. POWER-UP YOUR UI WITH WP-API AND REACT.JS
IMPORTANT THINGS I LEFT FOR YOU
▸Git - You need version control
▸Organization - Where to put what in your project
▸Testing - Automated testing with something like Mocha
▸Deployment - Making a production build with Webpack
▸Error handling - Gracefully catch errors and inform the user
▸Authentication - Logging people in and letting them do special things
like…
▸Other HTTP actions - We did not cover POST, PUT or DELETE

31. POWER-UP YOUR UI WITH WP-API AND REACT.JS
SUMMARY…
▸ WP-API plugin is easy to set up and allows new ways for you
to interact with WordPress
▸ React and it’s related technologies can be used in the creation
of plugins, themes, or totally separate interfaces. Go be
creative!
Source: http://chickensmoviereviews.blogspot.com/
It wasn’t too hard

32. POWER-UP YOUR UI WITH WP-API AND REACT.JS
STEVE LOAR CAN
BE FOUND…
▸ Twitter: @SteveLoar
▸ Email: sjl7909@gmail.com
▸ LinkedIn: www.linkedin.com/in/stevenloar
▸ GitHub: s-loar
▸ Slack: steve_loar
▸ Project: https://github.com/s-loar/react-
wordpress
▸ Slides:
https://speakerdeck.com/sloar/power-up-
your-ui-with-wp-api-and-react-dot-js