Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using WordPress as a Backend for Your React Project

477 views

Published on

In this talk from San Diego WordCamp 2018, you'll learn how to get data from your site using WordPress' REST API and use it in a React component.

Published in: Technology
  • Be the first to comment

Using WordPress as a Backend for Your React Project

  1. 1. SanDeigoWordCamp2018 WordPress+React = Adam Rasheed Using WordPress as a Backend for Your React Project
  2. 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. 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. 4. SanDiegoWordCamp2018 Solution: Headless CMS • React for Front-end • WordPress for Backend
  5. 5. SanDiegoWordCamp2018 Let’s Learn How!
  6. 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. 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. 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. 9. SanDiegoWordCamp2018 Mindset Shift: Separate Yo Concerns! • Data/Logic != Presentation/View
  10. 10. SanDiegoWordCamp2018 Traditional CMS Server/Database Wordpress CMS (PHP Renders HTML) Website
  11. 11. SanDiegoWordCamp2018 Headless CMS Server/Database Wordpress CMS Website Mobile App JSON Data
  12. 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. 13. SanDiegoWordCamp2018 Local by Flywheel
  14. 14. SanDiegoWordCamp2018 Wordpress - Folder Structure
  15. 15. SanDiegoWordCamp2018 Setting Up React Environment • Create React App • npx create-react-app my-app • cd my-app • npm start
  16. 16. SanDiegoWordCamp2018 Folder Structure
  17. 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. 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. 19. SanDiegoWordCamp2018 How to Access Endpoints http: //domain.com/wp-json/wp/v2/
  20. 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. 21. SanDiegoWordCamp2018 Let’s Check Out Posts on My Site • http://adam-rasheed-headless.local/wp-json/wp/v2/posts
  22. 22. SanDiegoWordCamp2018 Let’s Check Out Posts on My Site • http://adam-rasheed-headless.local/wp-json/wp/v2/posts W TF?
  23. 23. SanDiegoWordCamp2018 Reading Data for Humans • Curl • PostMan —>
  24. 24. SanDiegoWordCamp2018 Reading Data for Humans
  25. 25. SanDiegoWordCamp2018 Wordpress – My Blank Theme http: //bit.ly/headlesswptheme ACF to REST API Plugin
  26. 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. 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. 28. SanDiegoWordCamp2018 Create React App • Up and running with react. • No configuration needed • Can easily build for production
  29. 29. SanDiegoWordCamp2018 Simple Exercise • Creating a Component that pulls in a list of our WordPress Posts
  30. 30. SanDiegoWordCamp2018 Folder Structure <— Only need to look at this
  31. 31. SanDiegoWordCamp2018 App.js
  32. 32. SanDiegoWordCamp2018 posts.js
  33. 33. SanDiegoWordCamp2018 posts.js
  34. 34. SanDiegoWordCamp2018 Singlepost
  35. 35. SanDiegoWordCamp2018 posts.js
  36. 36. SanDiegoWordCamp2018 posts.js – fetchData()
  37. 37. SanDiegoWordCamp2018 consoled data
  38. 38. SanDiegoWordCamp2018 End result
  39. 39. SanDiegoWordCamp2018 Recap: Fetching WordPress Data • Set endpoint • Mount Component • Fetch Data • Set state • Render component
  40. 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. 41. SanDiegoWordCamp2018 If React isn’t your Speed • Learn Javascript. Seriously. • You don’t have create a completely Headless CMS.
  42. 42. Nearly Headless CMS You can create use the WordPress API to add a layer of functionality to your site.
  43. 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. 44. Go out there and Build something Rad. ! !44

×