Recommended
More Related Content
What's hot
What's hot (20)
Similar to Using WordPress as a Backend for Your React Project
Similar to Using WordPress as a Backend for Your React Project (20)
Recently uploaded
Recently uploaded (20)
Using WordPress as a Backend for Your React Project
- 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
- 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)
- 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
- 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
- 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