 So we only have 30 minutes and there's a lot to cover so I'm probably going to say you'll have to look at the documentation lots of times but this hopefully will give you an idea of how to hit start to do something with React and WordPress API. So I'm Eric Doubleack, I'm a senior developer and co-founder at 11 online. I installed my first WordPress site in 2004. These days I work mostly in React. On the front end I use either Python and the Flask framework or PHP with the Lumin framework in the back end. I also do a little bit of Android out doing a lot more of that and of course WordPress. I've been using React about two years. So what are we going to do today? Very brief intro into React. A brief intro on the WordPress API and then we're going to go over a simple example. Not how to do a headless WordPress site but how to start using React components in your existing WordPress themes or plugins. So I don't know how much you know about React and React first off is not a framework. It's a collection of libraries. When I build an entirely, a front end entirely in React, I don't know, maybe a lot of better ideas. 30 libraries, quite a few. React itself doesn't try to do everything. And since it's not a framework, there's a lot of different approaches to use React. Everybody has their own approach and when you throw in other things in the mix, like Redux, everybody has their own approach on top of that. So how I explain React might not be how you do React or might not be how a tutorial does React if you look at it later. But I'll tell you how I like to think about using React which is React is a way to build predictable user interfaces based on the state or the data of the app. And as your data changes, so does the presentation. This is different if you're used to using jQuery. You are manipulating the DOM constantly, right? Something happens, you change the value, you're doing all this manipulation. React doesn't work like that. The state changes and the presentation changes. WordPress REST API, it's now part of WordPress Core. Does anybody use the WordPress API? Okay. So how we're going to be using the WordPress API right now? We could use Admin Ajax. Is anybody familiar with Admin Ajax? Okay. A few more people, not very many more. Admin Ajax is kind of the old way where you might do Ajax with your WordPress theme or plugin. But unlike Admin Ajax, the WordPress API bypasses a lot of things. Delicious Brains is a really good blog post about all the steps that are involved in Admin Ajax request and the WordPress API request to compare how the two are used. WordPress API has a lot of built in points. We're not going to use them today. But it's super easy to write custom ones as well. I'll show you how to do that. Okay. So React. React is daunting when I first started with React. I had to figure out how to build the project and use Webpack. It was really complicated. Right now, there's a really, really easy way to get started with React. It's called Create React App. It's a CLI tool. You can, on the bottom, there's a link. And Facebook Incubator put it out. And what it does is it deals with all the stuff that's hard about getting started with React. It just deals with it for you. So it deals with the build process. It has a local server. It has a file watcher. And then it does hot reloading while you're in development. Okay. So I don't know if I can share my slides at the end of Twitter so you can get some of these URLs. Okay. So let's get started. Let's get coding. Live demo. What could possibly go wrong? I have a repo of the demo. 11 online. It's on GitHub. It's 11 online. React. Okay. So what I've already done is I've created a plugin. So this will work just the same way in a theme. I did a plugin because I thought it would be a little bit easier. I didn't do anything in the plugin other than create an index PHP file. And I used create React app to create a WP plugin directly with the React app. And this is, when you use create React app, this is what it looks like. You have a packet of JSON. When you install it, you'll run it again and then install. And you have a very simple index JS file. Which there's a bunch of React stuff in here. But basically what you're doing is you're binding your app to an element on the page. And then how they have it set up, most of the logic happens in half JS. So that's kind of how I started. Index PHP. Use create React app to create the WP plugin directly. Okay. So I'm going to run... One of the downsides with how this is set up and I didn't spend time to fix it is the local development server is not easy to use with the create React app one. It isn't easy to use with creating a WordPress plugin. At least I didn't have an easy time. So when you run npm run build, you get this file name.something.js. And that changes every time you run run build. So if you're enqueuing that script, just pay attention to what that is. So you're enqueuing the right script. Okay. So this is like my second and third command. What I'm going to do is I'm going to create a little review plugin. Very simple. At the end of a post, we're going to put a little option to leave reviews. So I'm doing something very simple. Right? Add a filter for the content. I'm going to add the reviews. And if it's a single post but not the home page or the blog page, I'm going to add this div with an idea root, which in my index.js file is the idea I'm looking for with the app inside of it. And then I'm going to enqueue the React script. Okay. Everybody following me so far. Are we good? Yeah. Okay. So now I have this post. And at the end, I have this line to get started, edit, source, slash, app.js, and save to reload, which is what I have in my app.js file. So now we see, okay, we use pre-react app. We built our React script. Our plugin pulls that into the page. I'm trying to go fast, but tell me if I'm going too fast because there is a store. So you've got code that's compiled into the app. Yes, it gets compiled into main.js. How do you push that plan to use it? I'm just running this locally. That's what you were doing? Yeah. Yeah. Okay. So now we're going to add some API logic, okay? So using, like I said, the REST API has a bunch of built-in endpoints. There's even a Java backbone library that allows you to work with that. Since I'm not doing something really with posts or post meta, I decided that I'd do my own custom things, which is really, really easy. It's a lot. If you have used that in any Jax, which I know is relevant to this room, it's very similar. You get to add an action, which is this REST API in it, and then you use this register or REST file to notice different parameters that go in there. You have what methods you take and what your callback is, and then what route you're using. Okay. So I created one an add review route, which we're not actually going to use yet, and then our get reviews. So this is just looking for a parameter of an ID, which then is passed in as the post data, or it's passed in as data, and then it goes into the ID. This is all in the documentation. So I would just, you know, when you start writing your own routes, just review the documentation. It's all pretty clear. So what I'm going to do is I'm going to, we're going to start with this get reviews. And I wrote a helper function to give reviews by post, and I'm going to use that here, because I'm also going to use that there. It's going to make more sense of why they're doing that. These are all just open on authenticated guys, right? Yeah. Yeah. So that's all that commit is. The basics of how we get the route. And by the way, this plug-in is for demo versus only. There's a lot of things I would change if I was to put this in production. For instance, I wouldn't do a query in a loop, and I'd probably up one on authenticated. If you're leaving a review that you are the user, you say you are, but this will be helpful for a demo. Okay, so our next commit. This is where we started doing some work in React. So remember I said at the beginning, React is, it has a state, it has some data, and then based on whatever that state is, it's going to render your app. So each React component has several pieces. There's only one that's required, and that's the render function, which says, okay, this is what it looks like when we render it. And then there's all these different life cycle functions. And you can define an initial state. It's often really helpful to define an initial state because React behaves predictably when the state is predictable. So what we're going to use is the component den-mount life cycle function, which just means our component mounted. What do I do? Okay, so in our case, we're going to get the reviews. We'll get our reviews, and we will parse the JSON, and then we're going to, if the status is 200, if we have a success, we're going to then set the state to have our data. So we have an empty review state. When the component mounts, it says, give me the reviews, and then we update the state with that. And then our render function will then change and display the data how we want it. Okay, so this is all really simple. What we're going to be doing is we're going to get our reviews from the state. We're going to put them into an array. And the reason is that once you're in the return part of the render function, there's a limited number of things you can do. So you kind of have to prepare your data before the return, and then you can do inline things like mapping through your array. If this looks super unfamiliar, this is ES6, so the syntax is a little different. But what we're doing is we're just saying, okay, we're going to go through our review array, we're going to map through it, we're going to take the review, and we're going to display some data. So I'm using a package from NPM called star rating component, which is just a React component that gives you some little features, some props, which are these values here are called props, and you can have either values or functions there. So some of these we'll see later on, we'll take a function and we'll do something when these are interacts with this component in a certain way. So we're just reviewing, we're going through the array, we're showing the star component, and then we're just saying if the review has an image, we're going to show the image, and then we're going to show the name. Okay, so what does this look like? All right, so before we had this to get started, edit, we're going to do this, reload, and look, we have our reviews. Okay, so I load the page the first time, right? It's not there the first second. It's got the component mounts, and that does the fetch. All right, are we good so far? Am I going too fast? Okay, so now we're going to start to see how React starts to really work in our favor. Okay, we're going to add a review. So let's first just go over the code. So in our render function, oh, also while I remember this, you'll see if you, as I've been doing these comments I'm going to show it in next page, but what I'm starting to do is I'm starting to add some global variables to this page. You can see, instead of just appending to the content of my group div, I'm also appending a script that has the post ID and the user activity. Okay, this is kind of a gotcha because it's not super easy to take WordPress data and pass it to a React app. And so you have to set some kind of global variable to pass it some data. But the great React app has this really great compiler that tells you about all the mistakes you've made and if you have any warnings. And one thing that it will freak out about is if you use a variable that the app doesn't see. So, when I define these variables, the post ID and user ID, you may notice that I'm having to use this BSLintDisableNext line. I'm telling the linter to not pay attention to this because it doesn't know about it. It's one of the gotchas for your app. And this also is true if you're using like a Google Maps, if you're using a Google Maps and you have a script tag that's pulling in that library into your React app and you're using great React app, they'll say, hey, I don't know about this global variable. I'll just step back for a minute. I mean, your requirement for all this is no JS mark, right? Yeah, so you have to have no installed computer and then you can install great React app. And I don't remember. There's a few other things that are required, but yeah. Okay. So what we're going to do is we're going to say, okay, is the user logged in? So if there is a user ID, we'll say, okay, this person is logged in. And then we're also going to say, do they have a review? Our review in state has the user ID as the key. So if it exists, we're going to say this person has a review. And then I always pronounce this tertiary, inline, tertiary, conditionals. Did I say it right? You're turning it right. All right, I was like, I was like, so once you're in the return function, kind of like there's a limited number of operations. There's also a limited number of conditions. So we're going to be using this inline, conditional. Oh, ternary. Sorry. I thought you were wanting to feel ternary, okay. I'm sorry. You gave me false hope that I got it right. So we just check, okay, does this person have a review? Does the person not have a review? Are they logged in? If so, that's what this question mark is. We're going to show these components. Otherwise, we're going to not show anything. And anytime you're doing something JavaScript team, in your return function, you have to use the earlier part. It shows how to do something. You'll see here, we have this prop that we didn't use before, which is onStarPlay, which takes a value, and it calls a function. So we have this function addReview. Okay, so we go up to our higher up in our component, and we have this addReview method. So all this is doing is it's doing what we set up our REST API to do. Take a post with some data and save it. And again, what we do is, okay, we're going to post, we're going to get the response, we're going to parse the JSON, and if we have a successful response, we're going to set the state with the new reviews. Now this is kind of, maybe it's a lot, okay? Do I have most of you up here? Okay, so let's see what this looks like. I have some reviews. Let me delete them. It's okay. Okay, so I deleted my reviews. Refresh the page. Okay, so I don't see any reviews. I'm going to leave my review. Okay, I'll leave a four-star review. And then it shows up. Okay, did I manipulate the DOM in any way? In any of my functions am I saying you do this thing and then you hide the review and then you show my review. No, what I do is I send a post to the API and then I get back the reviews and then those replace my new review states. My new review state, right? So I'm not manipulating the DOM. I'm letting React to deal with the DOM for me and all I do is update the state. So I'll set that. Okay. Sorry, this is so fast. This is kind of a lesson. Alright, let's go to the last commit. For this commit, we're going to add a little extra feature, which is average reviews. Okay. This is all done in the render function above the return. All we're going to do is as we build our review array we're just going to get the review total and then we're going to create a review average by dividing the total by the number of items in the array. And then we're going to say if there's reviews we're going to show the average review. Okay. Very simple, right? Again when we you know this, okay I'll just, I'll do the demo for my other review. This refresh. Okay. So we have this other review. We have this four star review for me. We have the average review of four stars. I don't like this post. I'll give it two stars. And what do we get? Again we get the review shows up and we get the average review. It's right there for us. We don't have to do any. So why React and the WordPress API? I mean besides it's sexy. That's a mad reason to do that. But our example was really simple, right? We could easily done this in jQuery. But the more complex our UI gets the bigger gains we get with React. Why? Because all we're doing is updating the state today. We're not worrying about all these little interactions. So we just let React deal with it. And you know as this would, as this example could build and we started adding things like uploads and downloads on reviews or comments on reviews or did you find this review helpful? The more we add to that, the more gains we get with React because the less we update this little piece of UI. We just update the state and we let React deal with it for us. It's okay. Questions. So where's, like, what sort of events is React listening for? It's listening for something to happen somewhere. Anytime I do an action I return the reviews. So if you look at the code in the API, that's why I wrote this helper function, getReviewsByPost because my addReview uses the same thing. So I'm returning something predictable. I'm returning all my data. And then I just use that data when I add a review and I update the state again. So, like, we just did a project and we're dealing with, like, all this relational data that's for balloon rides and it's balloons and passengers and employees assigned to their balloons and employees can have different roles in the balloons and all this complex stuff. React is really nice to build because all we do is every time we make a change, we send the data back from the server and everything updates for you. We don't get lost in all of that. Because every time we make a change it's one of these functions that react when it's posting the data in the server. Yeah, and then I update the state and the render function predictably updates for what I need it to be. So, you know, this example I think could go either way, but the more complex you could hopefully, you can start to see the games in five minutes. So what happens when a review is added because hopefully right out of the button that says add, you know, so you add review, the state updates, the new state has your review. So how does, where does the add keep the state of the game? So where do you enter your data for the review? Normally you would get add as bucket. Yeah. So when you, the start component has this on start flag property that this is just a library that you install through MPM. So when I say when you click on a star call this add review function. Add review then post to the server gets all the review data back and updates the state. So react isn't listening for anything all it's doing is saying when this response, when I get this response from my request, I update the state and then the render function deals with the DOM function. So that on start that's not the same thing? Well it's just a click list. That's all of this. Is this just overwhelming? Like I've been doing this a long time so yeah. Hopefully you can see I didn't write a lot for what I accomplished. So I'm not like I've never written a react app before. That part where you keep saying it returns all the state, right? Yeah, we return all the reviews. Yeah, so I mean how is that? Is that just getting bigger and bigger and bigger? Or is it just the reviews for that post? It's just the reviews for that post. Really most browsers can handle unbelievable amount of data in the state. We recently went into the limit and it was insane. I don't remember what it was, but it was thousands of database records. I think tens of thousands. 60,000 database records is what finally pushed it over the edge. So in this case, yeah, we're just getting the reviews for this post every time we interact and every time we have a review. We just replace it also. And, you know, there's a lot about like the virtual DOM and React. That's way too much to get into, but We could see the data right there. Use it on the post I think. Yeah, so it's just for that post. Yeah, in our get, we're using the post ID that's defined in our index.php file. It's an interesting approach that's like heavy on the data. Let's have everything be saved and then it'll be sorted out. Yeah. Yes. I noticed you were checking if the user was logged in here in the React code. Is there also something in the API that's verifying that? No, I didn't bother to do that. But if you were going to do this in your life, I would. How do you authenticate requests? Okay. I just didn't bother doing it. Yeah. You have to pass something from your JavaScript. And then the PHP. So pair the data and you can react. You can create all these components that you can and kind of like we're using the star component in a mature React app. You might have hundreds of components that get pulled in. So what do you think? Can you get started? Is this enough to get started playing a little bit? Or is it too overwhelming in this period? I'll tweet out the repo. It's really not a lot of code. But at some point you have to create that WordPress installation. Yeah, I'm just using a Bayer machine to run just whatever. Yeah. Let's take a picture.