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