POWER-UP YOUR UI WITH WP-API AND REACT.JS

Talk at WordCamp in Cincinnati

Transcript

1. POWER-UP YOUR UI WITH WP-API AND REACT.JS Steve Loar
2. POWER-UP YOUR UI WITH WP-API AND REACT.JS WHO AM I? ▸ Consultant - Working with Ruby on Rails, WordPress, React, and more. ▸ Craftsman - Over 20 years of crafting software solutions for large and small companies. ▸ Cowboy - Riding horses and competing in barrel racing and pole bending. ▸ Connoisseur - Lover of fine coffee and craft beer.
3. POWER-UP YOUR UI WITH WP-API AND REACT.JS LETS TALK ABOUT WORDPRESS AND REACT “It’s too hard. I don’t want to!” Source: http://www.laurenmarinigh.com/job-hunt-frustration/
4. POWER-UP YOUR UI WITH WP-API AND REACT.JS BUT IT’S NOT HARD, IT’S REST-FUL Source: Noon, rest from work by Van Gogh
5. POWER-UP YOUR UI WITH WP-API AND REACT.JS WHAT IS REST? ▸ REST stands for Representational State Transfer. ▸ It is an architectural style for networked applications using HTTP. ▸ It can perform all CRUD operations via GET, POST, PUT, and DELETE. ▸ Communication between clients and server is done in either XML or JSON formats.
6. POWER-UP YOUR UI WITH WP-API AND REACT.JS WHY WOULD I WANT TO USE REST IN WORDPRESS? You can build interfaces for both Web and Mobile, while letting your site admins keep the interface they know and love. Source: https://www.withfriendship.com/user/pintu/representational-state-transfer.php Mobile Web
7. POWER-UP YOUR UI WITH WP-API AND REACT.JS INSTALL AND ACTIVATE THE WORDPRESS REST API PLUGIN Source: https://wordpress.org/plugins/
8. POWER-UP YOUR UI WITH WP-API AND REACT.JS WORDPRESS RESOURCES AVAILABLE TO WP-API ▸ Posts, Post revisions, Post types, Post statuses ▸ Pages ▸ Media ▸ Comments ▸ Users ▸ Taxonomies, Categories, and Tags
9. POWER-UP YOUR UI WITH WP-API AND REACT.JS WE WILL ONLY LOOK AT THE POSTS ▸ Make sure that your Permalink settings are set to “Post name”. ▸ Create and publish some posts. ▸ You’re done. The plugin does the heavy lifting for you.
10. POWER-UP YOUR UI WITH WP-API AND REACT.JS LET’S EXPLORE THE API WITH POSTMAN ▸ https://www.getpostman.com/ ▸ Postman is free, as a Chrome app or a Mac app. ▸ It lets you interact with the WP-API plugin. Source: https://www.getpostman.com/
11. POWER-UP YOUR UI WITH WP-API AND REACT.JS THE POSTMAN INTERFACE
12. POWER-UP YOUR UI WITH WP-API AND REACT.JS OUR PROJECT GOAL TODAY: A SIMPLE QUOTES DISPLAY
13. LET’S DABBLE IN THE DARK ARTS REACT, REDUX AND, WEBPACK, OH MY! Source: The Wizard of Oz
14. POWER-UP YOUR UI WITH WP-API AND REACT.JS OUR JOURNEY BEGINS WITH NPM ▸ NPM is a package manager that will handle the install of the JavaScript libraries that will power our project. ▸ It comes with Node.js, which we also need. ▸ Node.js should be installed via Homebrew on a Mac. ▸ Homebrew needs Xcode and its command line tools to work. ▸ Sounds complex, but as a developer, you probably know all this already.
15. POWER-UP YOUR UI WITH WP-API AND REACT.JS PROJECT SETUP ▸ Open a terminal window ▸ Navigate to the top level WordPress folder ▸ Create a new folder named quotes, and navigate into it ▸ Type ‘npm init’ and answer the questions it asks ▸ You are now ready to install the packages to use in the project ▸ We will look at the main ones in this talk
16. POWER-UP YOUR UI WITH WP-API AND REACT.JS WEBPACK ▸ A module bundler - think compiler. It’s main purpose is to take your project assets and create a JavaScript file ▸ To do this it can utilize the following ▸ Plugins - to extend Webpack ▸ Loaders - to process ES6, SASS, etc. ▸ Code Splitting - to allow code loading on demand ▸ Performance Optimization - caching and faster builds
17. POWER-UP YOUR UI WITH WP-API AND REACT.JS WEBPACK.CONFIG.JS The entry file, the output file, and some plugins
18. POWER-UP YOUR UI WITH WP-API AND REACT.JS WEBPACK.CONFIG.JS Loaders handling ES6 and SASS
19. POWER-UP YOUR UI WITH WP-API AND REACT.JS REDUX ▸ A state container - a single repository of all application data ▸ Data never changes directly, but is re-created via Reducers. ▸ Reducers are activated via ActionCreators ▸ The idea is that data flows down to UI components, and actions are sent up from UI components
20. POWER-UP YOUR UI WITH WP-API AND REACT.JS CREATING A REDUX STORE
21. POWER-UP YOUR UI WITH WP-API AND REACT.JS ACTION CREATORS
22. POWER-UP YOUR UI WITH WP-API AND REACT.JS QUOTE REDUCER
23. POWER-UP YOUR UI WITH WP-API AND REACT.JS REACT-ROUTER ▸ Allows URL routes to work in our app
24. POWER-UP YOUR UI WITH WP-API AND REACT.JS REACT ▸ Not a framework, just a library; so it needs the previous stuff to do anything ▸ Just the view part of the app ▸ Code is broken down into JSX components which compile into JavaScript ▸ Uses a “Virtual DOM”; an in memory copy of the DOM ▸ One way data flow; data in, actions out
25. POWER-UP YOUR UI WITH WP-API AND REACT.JS APP.JS WIRES THINGS TOGETHER
26. POWER-UP YOUR UI WITH WP-API AND REACT.JS MAIN.JS ACTS AS OUR PAGE LAYOUT
27. POWER-UP YOUR UI WITH WP-API AND REACT.JS QUOTEGRID.JS IS OUR HOME VIEW
28. POWER-UP YOUR UI WITH WP-API AND REACT.JS QUOTES.JS IS OUR SINGLE ITEM VIEW
29. POWER-UP YOUR UI WITH WP-API AND REACT.JS OVERWHELMED YET? - WE ARE ALMOST DONE Source: http://www.sunsigns.org/9-reasons-why-you-may-feel-sleepy-at-work/
30. POWER-UP YOUR UI WITH WP-API AND REACT.JS IMPORTANT THINGS I LEFT FOR YOU ▸ Git - You need version control ▸ Organization - Where to put what in your project ▸ Testing - Automated testing with something like Mocha ▸ Deployment - Making a production build with Webpack ▸ Error handling - Gracefully catch errors and inform the user ▸ Authentication - Logging people in and letting them do special things like… ▸ Other HTTP actions - We did not cover POST, PUT or DELETE
31. POWER-UP YOUR UI WITH WP-API AND REACT.JS SUMMARY… ▸ WP-API plugin is easy to set up and allows new ways for you to interact with WordPress ▸ React and it’s related technologies can be used in the creation of plugins, themes, or totally separate interfaces. Go be creative! Source: http://chickensmoviereviews.blogspot.com/ It wasn’t too hard
32. POWER-UP YOUR UI WITH WP-API AND REACT.JS STEVE LOAR CAN BE FOUND… ▸ Twitter: @SteveLoar ▸ Email: sjl7909@gmail.com ▸ LinkedIn: www.linkedin.com/in/stevenloar ▸ GitHub: s-loar ▸ Slack: steve_loar ▸ Project: https://github.com/s-loar/react- wordpress ▸ Slides: https://speakerdeck.com/sloar/ power-up-your-ui-with-wp-api-and-react- dot-js