This document discusses using WordPress as a backend for a React project, creating a headless CMS. It recommends setting up WordPress and React development environments separately. The WordPress REST API allows accessing WordPress data as JSON that can be consumed by the React frontend. The document provides an example of building a React component that fetches a list of WordPress posts via the REST API and displays them. It also discusses hosting the WordPress backend and React frontend separately, such as using Netlify for the frontend and DigitalOcean for WordPress.

1. SanDeigoWordCamp2018
WordPress+React
=
Adam Rasheed
Using WordPress as a
Backend for Your React
Project

2. SanDiegoWordCamp2018
A few words about Me
• Front-end Developer based in San Diego
• Started my career doing custom WordPress sites
(and before that, custom MySpace pages).
• Now I do a lot more work in vanilla
HTML,CSS,JS (ES6 is siiick), and some PHP and
React work.
• On a quest to use React to make my site an
single-page web app.

3. SanDiegoWordCamp2018
adamrasheed.com
• Currently based in Jekyll (static-site generator)
• I want to get into posting blogs more regularly
• I want an easier time publishing blog articles and case studies. (I’ve found
I’m most consistent using the WordPress admin dashboard)
• Jekyll requires blogging in markdown, and then publishing
• Want an SPA (mostly for rad page transitions)
• Looking for the perfect solution

4. SanDiegoWordCamp2018
Solution: Headless CMS
• React for Front-end
• WordPress for Backend

5. SanDiegoWordCamp2018
Let’s Learn How!

6. SanDiegoWordCamp2018
Preface: You Don’t Have to Use React
• You can use these teaching for:
• vue
• angular
• or just to decouple your backend data from how you present it.

7. SanDiegoWordCamp2018
Getting Started – Overview
• What’s The Point of Headless?
• Setting Up Dev Environment (WordPress and React)
• WordPress & REST API
• React
• Creating a Component
• Pulling in Data
• Publishing Live
• Netlify (front-end)
• DigitalOcean (WordPress)

8. SanDiegoWordCamp2018
What’s The Point of Headless?
• Completely Custom Front-end Development
• Free from the constraints and structures of WordPress theming. Eliminates “div-itis”.
• Speeds Up Your Site
• Moves display logic to client side, and streamlines the backend. The Backend can solely
focus on logic, and the front-end can solely focus on displaying that logic.
• Enhanced interactive capabilities on the website.
• The back-end becomes the “state machine”, but back-and-forth interaction happens real-
time in the browser. (e.g. ‘clap’ feature on medium.com)
• You can host your backend and front-end in two different places!

9. SanDiegoWordCamp2018
Mindset Shift: Separate Yo Concerns!
• Data/Logic != Presentation/View

10. SanDiegoWordCamp2018
Traditional CMS
Server/Database Wordpress CMS
(PHP Renders HTML)
Website

11. SanDiegoWordCamp2018
Headless CMS
Server/Database Wordpress CMS
Website
Mobile App
JSON
Data

12. SanDiegoWordCamp2018
Setting Up WordPress Environment
• Local development environment of your choice.
• (No Cowboy Coding!)
• Local by FlyWheel (easy to spin up)
• Scotchbox (also great)
• Much more control (exactly match your hosting environment)

13. SanDiegoWordCamp2018
Local by Flywheel

14. SanDiegoWordCamp2018
Wordpress - Folder Structure

15. SanDiegoWordCamp2018
Setting Up React Environment
• Create React App
• npx create-react-app my-app
• cd my-app
• npm start

16. SanDiegoWordCamp2018
Folder Structure

17. SanDiegoWordCamp2018
Developing Wordpress
• We don’t need to display anything on the actual site.
• Using either the REST API natively or GraphQL through a plugin
• Just make sure custom post types and advanced custom fields show up in
the API (done through a plugin)

18. SanDiegoWordCamp2018
WordPress REST API
• Let’s you access your WordPress site’s data in JSON
• Endpoints (Posts/ Pages / Site Info)
• Available natively in 4.7+
• REST API Handbook – https://developer.wordpress.org/rest-api/
• ACF integration
• Plugin (ACF to REST API: https://github.com/airesvsg/acf-to-rest-api/)

19. SanDiegoWordCamp2018
How to Access Endpoints
http: //domain.com/wp-json/wp/v2/

20. SanDiegoWordCamp2018
How to Access EndPoints
Access Posts
• https: //domain.com/wp-json/wp/v2/posts
Access Pages
• https: //domain.com/wp-json/wp/v2/pages

21. SanDiegoWordCamp2018
Let’s Check Out Posts on My Site
• http://adam-rasheed-headless.local/wp-json/wp/v2/posts

22. SanDiegoWordCamp2018
Let’s Check Out Posts on My Site
• http://adam-rasheed-headless.local/wp-json/wp/v2/posts
W
TF?

23. SanDiegoWordCamp2018
Reading Data for Humans
• Curl
• PostMan —>

24. SanDiegoWordCamp2018
Reading Data for Humans

25. SanDiegoWordCamp2018
Wordpress – My Blank Theme
http: //bit.ly/headlesswptheme
ACF to REST API Plugin

26. SanDiegoWordCamp2018
React/JS v. PHP/WordPress
• PHP is server-side (renders HTML that shows up in the browser through
a server)
• React/JS are client-side (show up in the browser natively)

27. SanDiegoWordCamp2018
React
• React is a Javascript framework
• Vanilla React vs Frameworks like Gatsby
• GatsbyJs (https://www.gatsbyjs.org/)
• Like Jekyll for React
• Built in Router, Helmet, and GraphQli (IDE for GraphQL)

28. SanDiegoWordCamp2018
Create React App
• Up and running with react.
• No configuration needed
• Can easily build for production

29. SanDiegoWordCamp2018
Simple Exercise
• Creating a Component that pulls in a list of our WordPress Posts

30. SanDiegoWordCamp2018
Folder Structure
<— Only need to look at this

31. SanDiegoWordCamp2018
App.js

32. SanDiegoWordCamp2018
posts.js

33. SanDiegoWordCamp2018
posts.js

34. SanDiegoWordCamp2018
Singlepost

35. SanDiegoWordCamp2018
posts.js

36. SanDiegoWordCamp2018
posts.js – fetchData()

37. SanDiegoWordCamp2018
consoled data

38. SanDiegoWordCamp2018
End result

39. SanDiegoWordCamp2018
Recap: Fetching WordPress Data
• Set endpoint
• Mount Component
• Fetch Data
• Set state
• Render component

40. SanDiegoWordCamp2018
Hosting
• You can host on two different platforms
• DigitalOcean/SSD-based server for WordPress
• Netlify for front-end.
• Host WordPress first, update your endpoints in your React project, then
host that.

41. SanDiegoWordCamp2018
If React isn’t your Speed
• Learn Javascript. Seriously.
• You don’t have create a completely Headless CMS.

42. Nearly Headless
CMS
You can create use the WordPress
API to add a layer of functionality
to your site.

43. SanDiegoWordCamp2018
Ideas for using the Word API on your current
Site
• “Load More’ button that loads the next few blog posts without refreshing
the page
• “Clap” button like on medium.com
• Twitter like button on posts that updates “like” count on your website
without refreshing the page.

44. Go out there and Build
something Rad. !
!44