Downloaded 16 times
Using WordPress as a Backend for Your React Project
- 1. SanDeigoWordCamp2018 WordPress+React = Adam Rasheed Using WordPressas a Backend for Your React Project
- 2. SanDiegoWordCamp2018 A few wordsabout 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 basedin 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.
- 6. SanDiegoWordCamp2018 Preface: You Don’tHave 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 Pointof 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: SeparateYo Concerns! • Data/Logic != Presentation/View
- 10. SanDiegoWordCamp2018 Traditional CMS Server/Database WordpressCMS (PHP Renders HTML) Website
- 11. SanDiegoWordCamp2018 Headless CMS Server/Database WordpressCMS Website Mobile App JSON Data
- 12. SanDiegoWordCamp2018 Setting Up WordPressEnvironment • 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.
- 14.
- 15. SanDiegoWordCamp2018 Setting Up ReactEnvironment • Create React App • npx create-react-app my-app • cd my-app • npm start
- 16.
- 17. SanDiegoWordCamp2018 Developing Wordpress • Wedon’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 AccessEndpoints http: //domain.com/wp-json/wp/v2/
- 20. SanDiegoWordCamp2018 How to AccessEndPoints 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 OutPosts on My Site • http://adam-rasheed-headless.local/wp-json/wp/v2/posts
- 22. SanDiegoWordCamp2018 Let’s Check OutPosts on My Site • http://adam-rasheed-headless.local/wp-json/wp/v2/posts W TF?
- 23. SanDiegoWordCamp2018 Reading Data forHumans • Curl • PostMan —>
- 24.
- 25. SanDiegoWordCamp2018 Wordpress – MyBlank 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 isa 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 • Creatinga Component that pulls in a list of our WordPress Posts
- 30. SanDiegoWordCamp2018 Folder Structure <— Onlyneed to look at this
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. SanDiegoWordCamp2018 Recap: Fetching WordPressData • Set endpoint • Mount Component • Fetch Data • Set state • Render component
- 40. SanDiegoWordCamp2018 Hosting • You canhost 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’tyour Speed • Learn Javascript. Seriously. • You don’t have create a completely Headless CMS.
- 42. Nearly Headless CMS You cancreate use the WordPress API to add a layer of functionality to your site.
- 43. SanDiegoWordCamp2018 Ideas for usingthe 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 thereand Build something Rad. ! !44