Using React with the WordPress API

WordCamp talk on getting started using React in plugins and themes

Transcript

1. Using React with the WordPress API How to QUICKLY (we only have 30 mins!) get started
2. About me • I’m Eric Debelak • I’m a Senior Developer/co-founder at 11 online • I started in WordPress in 2004 • These days I work mostly in React.js on the front end and either python (Flask) or PHP (Lumen) on the backend. I also do some Android dev and, of course, WordPress. I started using React.js about 2 years ago.
3. What we are going to do today • Brief intro to React • Brief intro to WP API • Go over a simple example of how to use the two in a traditional PHP templated WP site
4. React.JS • Not a framework, but uses libraries to build a js front end • Since it isn’t a framework, lots of ways people build with it • I like to think of React.js as a way to build predictable user interfaces based on the state (or data) of the app. As your data changes, so does the presentation.
5. WordPress Rest API • Now a part of WordPress core • Unlike admin-ajax.php, bypasses much of WP core, and is therefore faster • Many built-in endpoints, but easy to write custom ones as well
6. Easiest way to get started with React.js Create React App!!! Deals with: • Build process • Local server • File watcher • Hot reloading while in development Learn more here: https://github.com/facebookincubator/create-react-app
7. Let’s get coding Live demo, what could go wrong? https://github.com/11online/react-wp-plugin-demo
8. Why React and the WP API? You mean besides being sexy? Our example was pretty simple, one that wouldn’t be terrible to implement in jQuery. But the more complex our ui gets, the bigger gains we get with React. Why? We are just updating the state and let React deal with the ui instead of manipulating each piece of ui whenever anything changes. For example, what if we add up/down votes on reviews? Or comments on reviews?
9. Questions? eric@11online.us