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