2.1 Creating the App

In the previous lesson,we got to everything ready for writing our application. We have our WordPress installation and we have all the tools for writing our code. So, the next thing that we need to do is figure out how to get the data from WordPress and it's really quite simple. It is a rest API So we are of course going to be making some HTTP requests. Now the API is JSON formatted, so everything that we are going to get from WordPress is going to be in JSON. And the API lives, Inside of wp-json so everything that we are going to get is going to stem off of this url. Now WordPress allow us to query just about everything posts, pages, tags, categories, users I mean if we could view it within just a normal press website then we can query and access it through the API. So we have our host and then the next segment is WP- JSON. Then we have WP and then the version. V2 and I assume that whenever we have a V3 and V4 and so on it's going to be V3 and V4. But right now we have V2 and then we specify what is that we want to query. So we're going to start with posts, and so we simply just say posts and this going to retrieve our posts. And since we only have one post that was given to us by WordPress, this is all the information for it. Now, of course, it is not formatted in this case, and if we looked at the source code, it's not going to be formatted either. So what we are going to do in this lesson is start to write a class that we can use in order to quickly retrieve the information that we want without having to write a lot of extra code inside of our application. So let's go to our code editor. I'm using Microsoft Visual Studio code and it is a very good editor for JavaScript, so that's why I am using it. And we're going to add a new file inside of our source folder and we can call this whatever we want, but I am going to call it API because this is going to be a class that we are going to use in order to query our API. And we really just going to export one thing and it's going to be that class. And we're going to have methods in order to retrieve the individual pieces that we want. So as far as retrieving our posts, we can write a method for retrieving our posts. Now we can call this, get posts or posts or whatever. I'm going to just say, posts, and we are essentially going to use fetch, we're going to pass in the URL, we're going to call then, and then go ahead and parse this into an object And we're going to return that so that the consuming code will then have to do the rest of the work. So let's start with a base URL because all of our URLs are going to have at least something in common and that is The host and the path up into the item that we want to query. So let's create a variable called baseUrl and our URL is going to be localhost/wp-json/wp/v2/ And then our methods are going to use this in order to perform our query. So we will create a variable called url inside of posts. And we're going to use the string building feature, so a back tick and we want to use our base. URL followed simply by posts. So we will past that to the fetch function, and this is going to be the basis for our API. So inside of app.js we want to import API form our API. And let's go ahead and do this, we'll say, let. Well, we don't even need to do that. Well, yes, we do, we need API, we'll new up our API constructor. And then we will say api.posts, and then we need to do something with that data. And in this case let's just do this. Let's write it to the console, because then we can see the structure and we can see the pieces of information that we want to work with. So one thing I didn't cover in the previous lesson is the web pack config. So basically what it's going to do is look inside of the source folder, it's going to compile. All of those together, and it's going to output a file inside of public assets js. Now, whenever we run the web pack dev server, that's not going to be the case. It's going to still compile that, and it's going to look like It's going to be in the Assets > JS, in the inside of here, but really it's not. But as far as the HTML is concerned, the source that's being pulled in is Assets > JS > App. So we want to go ahead and run our server. We're going to do that with NPM start. I have a script already set up, so that it's going to run. A web packs dev server and we can see right here. What web dev server means that. Any time we save any of the files that it is watching it is going to recompile our codes. So we can make sure that our code compiles here and if it does then Well, we can't be guaranteed that is going to work, but at least it compiles. So in our client portion of our application, we're going to go to localhost at 8080 and we aren't going to see anything and that is of course because we wrote everything to the console. So here we have an array and inside of that array, we have an object, so let's zoom in here. And we can see all of the information that's given to us. So we're given an array of posts in this case. We have the author ID, we have the categories that are applied to this particular post. And those are IDs as well, so if you wanted to pull in the author and the category information, you have to do that with other requests and we will do that at a later time. Now, every post object has a content and it has a title. These are objects and they contain other information like there is protected, but then we have this rendered property. This is the content of our post and it contains the html of that post. So in the html that we put on the post that's going to be here as well. We aren't getting just text. We're getting HTML. So we want to access this content, we also want to access the title, down here. If we wanted to work with any other tags that is in array and if there were tags here we would see them listed. If not the tags themselves, then we would see the IDs. And there is the link to that post, if we wanted to use that. We also have the date that this was modified and we should have one for created. Yes, that one right there. And so before we use this information and write a post component let's go ahead and write our application component. So, we're going to get rid of this code, at least what we have right now as far as retrieving stuff from the API. And we're going to import React from react, we also want to pull in ReactDOM as well, so we will have that, so we can render our components. And then, we will write our class, and let's just call this app, it's going to extend React component and let's just write the render method. In the next lesson we will add at least the component did mount method so that we can go ahead and retrieve the information and then pass that on to our host's components. But in this case we are just going to return, let's have a div element with a class of, let's use container. That's going to allow us to use boot strap's grid system if we wanted to do that. So use an H3 element, and let's say, hello, Headless WordPress. This will at least give us something to see in the browser so that in the next lesson, we can get rid of it and actually display some useful information. So we have our render method, now we just need to actually render this. So we're going to use reactDOM. We'll call the render method. We want to render our app, and we're going to use an element in the HTML with an ID of app-container. So let's go ahead and retrieve that element with document.getElementById. We will pass in app-container, and whenever we view this in the browser, we should see our title. Yes, hello headless WordPress. So in the next lesson we are going to use our post api method to retrieve our posts. We going to write not just a post component for displaying a post but a post list for displaying a list of posts. So that in the lesson after that we will be able to navigate between our list and the individual posts.