1. Power-UP YOUR UI WITH WP-API AND REACT.JS
Steve Loar
Power-UP YOUR UI WITH WP-API AND REACT.JS

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. Lets talk about WordPress and React
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:

4. But it’s Not hard, It’s REST-ful
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. What is REST? REST stands for Representational State Transfer.
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. Why would I want to use REST in WordPres s?
Power-UP YOUR UI WITH WP-API AND REACT.JS
Why would I want to use REST in WordPres s?
Web
Mobile
You can build interfaces for both Web and Mobile, while letting your site admins keep the interface they know and love.
Source:

7. Install and activate the WordPress REST API plugin
Power-UP YOUR UI WITH WP-API AND REACT.JS
Install and activate the WordPress REST API plugin
Source:

8. WordPress Resources available to WP-API
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. We will only look at the Posts
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. Let’s explore the API with postman
Power-UP YOUR UI WITH WP-API AND REACT.JS
Let’s explore the API with postman
Postman is free, as a Chrome app or a Mac app.
It lets you interact with the WP-API plugin.
Source:

11. Power-UP YOUR UI WITH WP-API AND REACT.JS
The postman interface

12. Our Project Goal today: A simple quotes display
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. Our journey begins with NPM
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. Project Setup Open a terminal window
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. Webpack.config.js Power-UP YOUR UI WITH WP-API AND REACT.JS
The entry file, the output file, and some plugins

18. Webpack.config.js Power-UP YOUR UI WITH WP-API AND REACT.JS
Loaders handling ES6 and SASS

19. Redux A state container - a single repository of all application data
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. React-Router Allows URL routes to work in our app
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
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. App.js wires things together
Power-UP YOUR UI WITH WP-API AND REACT.JS
App.js wires things together

26. Main.js acts as our page layout
Power-UP YOUR UI WITH WP-API AND REACT.JS
Main.js acts as our page layout

27. QuoteGrid.js is our home view
Power-UP YOUR UI WITH WP-API AND REACT.JS
QuoteGrid.js is our home view

28. Quotes.js is our single item view
Power-UP YOUR UI WITH WP-API AND REACT.JS
Quotes.js is our single item view

29. Overwhelmed yet? - We are almost done
Power-UP YOUR UI WITH WP-API AND REACT.JS
Overwhelmed yet? - We are almost done
Source:

30. Important things I left for you
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. Summary… It wasn’t too hard
Power-UP YOUR UI WITH WP-API AND REACT.JS
Summary…
It wasn’t too hard
Source:
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!

32. Steve Loar can be found…
Power-UP YOUR UI WITH WP-API AND REACT.JS
Steve Loar can be found…
LinkedIn:
GitHub: s-loar
Slack: steve_loar
Project: wordpress
Slides: your-ui-with-wp-api-and-react-dot-js