 and it works natively in browsers. And that's part of the reason it's kind of become so popular. You can do a lot of really cool client-sized stuff, which I'll script. And if you want to develop it, you can console log and do some stuff in a console like it will suit a little bit up for, because it's available natively. It's so much easier to develop for static sites using JavaScript, so you can have less storage needs and you can have less computing needs and you can find cheaper or free hosting options as well. React is a JavaScript framework, so it's used as JavaScript, and it's essentially bootstrap for CSS. It's a decent, really cool, like Gatsby, which is a great option if you want to. Gatsby's like Jekyll. Who's used Jekyll before? It spits out pages where you deploy to your server. And Gatsby's like Jekyll for React. It spits out this static site that you can put on the server and it handles a lot of things like routing. WordPress has routing built-in, so you can do a lot of dynamic linking versus hard code linking. It has comment, which is kind of like the WB, which is nice to read, React, like I mentioned. And let's see you get up and running React without any configuration, which is going to save you days when you try to do it and it can also allow you to build a production. And it's not going to be a simple exercise. We're going to create a component that pulls into a list of all the WordPress posts through the API. Let's take a look at the poll. Now, those three things, or those two things are really all we need to look at is the app.js file. And then I created a components folder with a post.js file, the apps.js. Now, it's importing a couple different models. The ES6 app on the county, let's you pull in pieces of info that you need at a time, so import React, and we're going to create a work component. We have React uses what's called JSX. It looks like HTML, but we'll go back to HTML and we have to close everything. And let's do pass and different attributes as well. So we're just going to do h1, and then we're going to throw in our post component. Let's take a look at the post. Looks like handle, so we'll kind of bridge it down. We're just pulling in React. And then I also created a JavaScript. Honestly, just, so in there I have the two endpoints I was talking about, post and pages, and we're going to use posts. And we have a single post component. Now, I could have thrown this into its own file and then called it in, but I just wanted to show you guys that you can do it in the same file. Now, this is called single post. And what single post is, it's just a div with an h2 inside of it, about a second. But this is going to popularly work at every single post that we have. And then this is our post component. So we kind of walk you through it. The first step is to construct it, which we can set up our state. And the state is really the magic behind React. This lets you kind of change, deal with interaction on the side, let's you deal with data. And then you're going to have what's called life cycle methods. It's going to be showing you where you are in rendering this. We're going to have a life cycle method and then we're going to fetch our data. And that's just calling a map through all the batch data is where we're calling our API. We're calling the data, specifically the post data. And then lower down, we're going to say for every post that we get, let's render a single post. And let's take a look at the batch data function. Now this is using ESX. You can batch that in point we created earlier and that's just going to be a URL. So you can just hardcore code a URL in there as well. And then you can tell to parse it as a JSON file so it knows how to read it correctly. And then you can do something cool with it. And then you can cache errors and font a lot of those out so you know what's going on. So let's take a look at that data and then the error function. That's where we're getting our data. So we're going to console out that out. And then we're also going to set the state of the post that we created earlier as the data that we get. So the data stored has opened that up and shows you this bit's a narrative three complex which is the three posts that I have created. This is the console out there. So to recap, we have set our 10 points at state or there's another one that I track. And I love using that file for primary and static site development because you can hook that up to your GitHub repo. So the order you want to do this is you want to host your WordPress first and once that's live, you update your endpoints in your React project to go to the live site. Make sure that's working and then close that React project. And React isn't your speed. You should just start by learning ESX because React and JavaScript is getting more and more popular and a lot of companies are calling in data so it's a good time to learn. If not, React is ESX JavaScript. And you don't have to completely move the headless if you don't want WordPress as to add this like layer of functionality that the API allows you to use. For example, you can have a load more button on your site that loads the next few log posts instead of refreshing the page or using pagination. You can have like a clock button like on medium where you just add tops and it'll reactable, set the state and use a post request to update the backup. You can have a Twitter like button on post that updates your like account or comment account in real time instead of refreshing the page every single time. So that being said, thanks for your time. There is a big form on the to have a link to the plugin and then there's a bunch of back and forth to be able to post there and find out. Yes. So you first of all made your presentation really fantastic. Do you have any tips for anyone that wants to make sure they continuously, now that they're moving to JavaScript to decouple their credentials from their code or so, you should have a PHP to guard their secrets. Any tips for decoupling that labels? What cases would you need credentials? Sure, so like for example, it's very common in many people's PHP projects to be calling other APIs with their API keys built into it. So I guess any word of advice for keeping those two concerns decoupled while they adapt to this new environment. Yeah, so in WordPress it's react itself like WordPress API itself a couple of end points you do need authorization for. So you can set a co-author, basic copy, you can set that up within function stuff you have to be able to have. A lot of the stuff I was talking about though, that stuff you can...