 That's something. All right, so this one's the Advanced React Talk. So it's a continuation of the previous talk. So in the last talk, we touched on the real basic fundamentals of working with React and creating components. And we created a really simple to-do app. But there's so much more to React than that as far as things you need to know or things you could learn so that when it comes time to build an actual application, you'll have that information. So in this talk, we're going to touch on some pretty, it's going to be a lot more complicated. I'm not going to lie. And so for those, if what I'm talking about seems way more than what you're kind of ready to take on, we're all at different levels here. And that's the nature of a conference. And that's the nature of a web developer is that we're all at different points in our learning. So if you're not getting it, that's to be expected for some of us, because we're all trying to learn and we're all at different points. But the big takeaway here is that the stuff that I'm showing, even if you don't fully grasp the ins and outs of the patterns that I'm going to be talking about, the JavaScript patterns, it's just important to really take away that there are these patterns and that they solve certain problems. Sometimes you have to just start with the big idea and grasp that. And then later on, as you start to experiment with these patterns on your own, they'll start to make more sense. So we're going to talk about two component patterns, which is the higher order component pattern and the render props pattern. And then once we do that, we're going to do React Router. So the first three parts are going to be a live coding part where we're going to walk through building out an actual application. So this one will be more like a website where it has pages and posts and you can click around and it has navigation and that kind of stuff. And we're going to use some of these patterns along the way. But again, we're going to start small and kind of build our way up. The last two things we're going to talk about is Redux. We're not going to do the Redux live coding. I'm not that ambitious. Redux is a very complicated subject and also just kind of wiring it up is very complicated. And to be honest with you, as a developer, kind of setting up your initial Redux and all the stuff that goes with Redux is something you do once in a blue moon and then you forget about it. And so I could never set up here in live code that. So we're just going to talk about it and give you a lot of references. And then the last thing we're going to talk about is server-side rendering, which is just another aspect to an actual application, a React application that you need to think about. So we're going to do something just slightly different. So I'm going to be coding from a completely blank file like I did the last time. The big difference though is that these right here cover the three phases of our live coding. And so at any time you can click on these examples and have the full code as well as kind of watch me live code the one that I'm going to be doing in the room. And then if you want to, and I probably will, I'll just share out that final link of the final one that I build in the room. Because it'll be a combination of all of these into one. Sound good? Okay, so I need all the real estate I can get here. Is that better or worse? Better? Yeah, I can't get it to, I don't know why. I promise my code probably, I'll try to do a good job of not having my code be that long. All right, so when you're using Code Sandbox this is just how it looks like it's at the beginning. So what I'm going to do is I'm going to delete a bunch of this stuff. Man, we'll really fall asleep. Oh, it was good knowing all y'all. Okay, so this is just our little hello world. So the first thing we're going to do is we're going to create an excerpt component and this is going to be like a post excerpt and then we're going to list out posts from a website. So we're going to actually fetch data from an actual website and list out the posts in an excerpt component. And this is just going to be a functional component and it's going to return. So we're going to have a wrapping div and then inside of here we're going to do an H2 and this one is going to get a, this component is going to get an individual post which is an object. So this post is going to have an ID, title, all that kind of stuff. And so I'm going to pull that out of the, and it's going to get it via props. So this component is going to get one prop which is called post and it consists of a post object that has all of the information for one post. And so inside of this H2, I'll be able to go and say post.title.rendered. And that's just because of how the REST API is structured. And then right here I'm going to have a p tag and in here we're going to do post.exerpt.rendered. And then over in this one we're going to create, we're going to convert this to a class. So every class-based component needs a render method and then it'll return JSX. So that's what we'll do. Oh, what is that? Hey, there you go, teamwork. Teamwork makes the dream work. Okay, so I haven't really done anything but what we're going to do really quick is I'm going to make a state for this one and I'm going to give it some data. And for right now I'm going to make an array and it's going to have just some basic data really quick. So it's going to have a title. I'm going to make it look just kind of like the REST API does. I have an excerpt and I'm just going to make two of them. So right now what I'm doing is just getting some dummy data that we can work with until we're ready to actually make our REST API call. So I just want to get this post.exerpt component to render on the screen and use this actual data. So I'm going to have a render posts function and this is in the state. This data is in the state so I'm going to pull it out and that way I can go return data.map. So somewhat similar to what we did with our list earlier and I'm going to get a post and then for each one of these I'm going to output a post excerpt and I need to import this and this thing needs to get a few things. So it needs to get a post. Remember we said it's going to get a prop called post and we're going to pass this initial post in. So each time this thing loops it's going to get one of these posts and pass it along and then we also need to set a key because that's kind of a react thing when you're looping and here we can just use post ID. And I think I forgot to export this. Oh yeah, I didn't set an ID. So we're rendering this, we're running our dummy data. So the next thing we're going to do is we're actually going to use one of our first lifecycle methods which is something we touched on in the last talk but we didn't actually use. So we're going to use component did mount to when this component first mounts to go and make a request to the REST API and pull our post in. So I'm going to say component did mount. So this is how you use the lifecycle methods. You simply just define them within your class that you're making. And what I'm going to do is I'm going to go and get some data. So the way that we normally fetch data outside of the jQuery world is we'll use the fetch API which works except for I think IE and so there's a polyfill that I will usually pull in to make sure that it works. And since we're just doing a get request and we're just going and getting some data, we're not trying to like update a post or anything. We can simply just pass in a URL. All right, so I'm going to request the posts. And then one of the things you have to do with fetch is you have to, it returns what's called a promise. And do they talk about promises much a little bit? So this is an asynchronous thing. So it's going to take a few seconds for it to go out and fetch posts. So it returns a promise saying I promise I'll let you know when the posts are back. So we're listening for that promise. And this then function will get called when the promise says, hey, I got data. So the first thing we need to do is we're going to take what's called a response that it gives us and we're going to have a little function that takes the response and we can call a function on it called JSON. And what that'll do is it'll actually take the response and convert it into a JSON object that we can work with. And then we'll take the JSON that it gives us and we will do this.setState. So we'll set state once we have our data. And our data for our state is in something called data. So apparently that name would be good. And we'll just pass the JSON directly to it. All right, and so you can see over here that it is working-ish. So one of the things that we can do is, see how it's got these p tags in here? So because we're getting like formatted information from the REST API, we can switch this up to be a div. And I never spell this right. Let's see if I put it in my notes. Oh, it didn't. All right, here you are, I see real programming. Google, dangerously, and there you go. I've Googled it lots of times apparently. I never can remember how to spell this. So we can set this thing called dangerously set inner HTML. They really want you to know that this is like, they would rather you not do this. And it's gonna take an object and it needs a property called underscore underscore HTML. And then what you pass to it is this information, the data that you wanna put into it. So probably, probably I just figured, yeah, just because it's gonna give us a p tag here, but later when we get the content we'll be getting who knows what. And so I just put it in a div, it feels more correct. So the next thing that I wanna do is if you see here when I reload it's like, oh, I got data up here, yeah. So let me remove the data, because we're gonna have no data. And so you see when it first loads there's nothing there and then it goes and gets the post and then the posts show up. So I'll do it again. So you can see it's blank for a little bit, really long that time. And then it goes and gets the data. So what we're going to do is we're gonna switch up our render down here a little bit to have a loading indicator. So we're gonna say if not data, return, and we're just gonna put some text in here, it says loading and I need to get this out. And then up here I'm gonna change this instead of being array to be null. I had this happen before. So I had this happen before when I was preparing for the talk and I literally didn't do anything and it like fixed itself. It's not working like that this time though. Yeah, one thing that I don't understand is why it formatted it like this. But yeah, so we're not doing what we should do and like actually check for a response. So what I'll do really quick, what I'll do is I'll do a, I probably crashed the site. We'll try another one. Let's try a motor trend. Yeah, it's really weird because I didn't really do a whole lot and it was working just fine. So let me go back. Yeah, so at this point I'm pretty much like I was. Yeah, I don't know what, I don't think there's anything wrong. I really don't. So this thing refactored this really weird to where, here I'm just gonna close this out. Yeah, so I had it formatted. Let me try and, all right, so let's just do it again. So in here I'm gonna get a response. I'm gonna return response.json. Then I'm gonna get json. I'm gonna call this .setState. I'm gonna set data to be equal to json. So undo the Wi-Fi. So this happened last night when I was doing some prep and I went to eat, came back and it worked. So we could try that. I don't know. Yeah, it's really slow. So, well, no, no, no. So what I wanna know is who's stealing all the internet. That's what I wanna know. Yeah, I think it's just my computer. What's that? Yeah. No, I think this is right. Oh, wait, wait, wait. So you're thinking I should remove this. So I'm gonna try connecting to my Wi-Fi. I feel like that's how I always type it. I tried that one earlier. That one was way worse. Yeah, but I had it working earlier. Hey, I fixed it and I did nothing. Hi, yeah, yeah. Okay, well, I don't even know where I'm at anymore. Let's see here. It's all hopes and prayers. It really is, like, and the whole statement, the statement of it's a miracle that all of it even works is so true. All right, so let me look at my notes really quick because I have no idea where I'm at. Oh, we wanna do the loading thing. So what I'm gonna do is I'm gonna say if, this is where I died last time, not data, we're gonna return something different and we're just gonna do an H2 with some text and then up here we're gonna set this to null so initially it doesn't have data. All right, I gotta destructure that and pull it and there we go. That's how I should have went the first time. So now you can see it kind of like does a little loading thing and then it pulls in the post. All right, so now what I'm gonna do is I'm gonna refactor this into what's called a post list component. I think I'm just gonna like pull all this in there. All right, so really all I did was take everything on the app and put it into post list and the next thing I'm gonna do is I'm gonna create another one called work list. So on the REST API that I'm working with we have like a works custom post type or a portfolio custom post type thing. I'm gonna take post list, change this to work and right here instead of doing this excerpt just a different, instead of making another component right now I'm just gonna return something and I'm gonna import it. So I'll go back and look at that in just a second. The main reason I had to make a work list one was because the data that I get back is different. So and this right here, this text that you see right here is called an overview in the REST API response that I get. So this post type doesn't have an editor in it in the post type in WordPress admin. And so, but it gets this thing called an overview. So really the main things that are different about the work list and the post list is the way that they render their data and the endpoint that they pull from. But other than that they're completely identical. So what we're going to do is we're going to use a higher order component pattern to kind of get rid of this stuff that's the same between these two components, right? So one of the principles of all programming is the acronym is dry, right? Don't repeat yourself. So you try to keep your code dry. So one of the, what we can do is we can use a pattern and react called a higher order component. And what's gonna happen is we're gonna create a component and that component is gonna handle fetching the data. And what it's gonna get is it's gonna, you're gonna tell it the resource that you wanted to fetch and you're gonna tell it the component you want it to render. And it'll, and then we're gonna update our work list and post list to use this new higher order component as a way to share the data. So higher order components are useful for a lot of things. Our instance where we're doing, what we're doing right here, we're using it to fetch data. And, but you can actually use it to do any number of things where you wanna share this state or you wanna have some complex logic in a component and have a lot of other components that then get that state passed to it. And hopefully it'll make more sense once I build it. So I wanna call it with data. And a higher order component is actually a function. So I'm just gonna go export default function. I'm gonna call it with data. And what this, what this is going to, what this function is gonna return is another function. And this other function is going to receive the component we want to render. So I'm gonna just, just like any other property when you're, any other argument for a function and how you can name the arguments, whatever you want, I'm just calling this wrapped component. But wrapped component is literally going to be whatever component I pass to this thing. And again, it's a function. And what this function does is it returns an actual class. And I'm gonna call this class post-loader. All right. And so what I'm gonna do is I've had candy, like, you know, they give out candy and they totally give you some candy. Huh? Yeah, there you go. So what we're gonna do is we're gonna go to post-list and I'm gonna pretty much steal a lot of the code that's in it. So I'm gonna take the state and I'm gonna take the fetching and I'm gonna move it down here. And then this resource, this is gonna get passed to this first function, resource. And then I'm gonna change this, this string to be a template literal so that down here at the end, I can dynamically using, you know, dollar sign, curly braces, I can pass the resource. And so I can dynamically, I'll be dynamically changing what this endpoint is based on what resource I pass into it. And you'll see this in a minute when we actually start to use it. And then we're gonna do the render. So I'm gonna take the render from this. So this class that I'm defining, it still needs to have a render. And the main difference is, is down here, what it's going to render is it's gonna render the component that we pass. And I promise this is gonna make a lot of sense once you see us use this component. So the higher order component, at the end of the day, you know, it's gonna get a resource. It's gonna, we're gonna tell it a component we want to render. And then this class that we're building, it's gonna get mounted and it's gonna fetch data and update data. And it has this state and it has data. So what we're going to do is we're gonna take our wrapped component and we're gonna pass it a prop. We're gonna call data and we're essentially passing it what this thing fetched for. So the higher order component is fetching the data and then rendering, it's handling, rendering our component and passing the data to it. And then the last thing we're gonna do is we're gonna go and use the spread operator and essentially say any props that this component, this higher order component got, we're going to pass those along. All right, so now let's like make this make sense because I'm sure everybody's really lost. I'm halfway lost, so if that makes you feel any better. So we're gonna pull this into our post list component. And at the bottom instead of just exporting our post list, we're actually gonna call with data. We're gonna tell it we want posts. And then remember it's a function which returns another function. And we can do that whole immediately executing thing where we just put parentheses. So calling with data passes the resource right here and then returns us another function. And that function is expecting a component. And we can immediately execute it by doing parentheses and passing in this post component. And then for the render, I can make some changes. So I can get rid of this. We just need to return that. I need to change this from state to props because this component's getting the data via props now. And then I can remove all of this stuff because that's what the higher order component is doing. And with any luck, it should work. And it still works. So we'll recap this again. So a post list is getting exported from the post list JS. And you can see down here, I'm exporting that post list. But instead of just exporting it traditionally, I'm exporting the results of calling these two functions. And also too, just to kind of give a little bit more context, like the reason they call this a higher order component pattern is because we have in JavaScript we have what are called higher order functions, right? So those are functions that return another function. And so this is actually a function that returns another function, but it also returns a component. And that's kind of where the name comes from, higher order components. So with data as a function, right here it gets called, it gets a resource, in this case post. Then it returns a function and it expects you to call that function with a component. In our case, we're casting it work list. And then it creates a class that does all the work we wanted. And in its render, instead of rendering something it would have rendered, it renders what we pass it, which is post list. So in our instance, right, this second wrapped component is a reference to post list. And it's passing the data via props instead of managing it within its state. And the reason we did this was because we wanted to get rid of some of the duplication of effort with our work list. So if we go to our work list now, we'll do the same thing. We'll get rid of most of it. It'll just return its loop that it loops over data. And then again, we'll go with data. And in this case, we'll pass it work. And then we'll immediately execute this function. And again, if we go over here and we change this to work list, I gotta change one more thing. So the last thing I need to change here is that, again, see that, right, originally it had it state internally but now it gets it from props. So we just need to change this to props. And you'll see that it works again. So again, it's a complicated kind of pattern, but what we've been able to do though is we've been able to create a component that essentially fetches any kind of data we want from WordPress. We just give it a resource and then it'll pass that data to any component we want it to pass to. So this is a component that we could actually use throughout our entire application for pre-image. Any view that fetches information from the REST API, we just have to give it a different resource. We could expand it even more. It's still kind of limited here. You can't do too many crazy queries. You're still just gonna be able to fetch basic stuff, but it's a pretty useful component just as it is. And we still have that little loading thing. We didn't lose that ability. Any questions really quick about the higher order component before we move on? Yes. Well, just in React, if you want to create a stateful component in React, you have to extend its component class. So you're forced to use the newer JavaScript classes, whereas if you just wanted a stateless component, you could render it as a function. Functions are for manipulating data classes or usually for creating objects is usually what it's for. All right, so what I wanna do now is I wanna refactor this and we're gonna use a new pattern called render props, which is a whole lot easier. So if you didn't like that one, maybe you'll like this one. So I'm gonna create a new file called post data. I think that's what it's supposed to be called. What the heck am I thinking? Nice. So what we're gonna do here is we're gonna go take all of the stuff from with data. So we're gonna take the state and all of that. We're gonna move it over into this new kind of class that we're building. And it's going to get the resource as a prop. So we'll just say const resource. So this code can pretty much stay the same. And then in a return, we're gonna do the same kind of return here. The data is gonna come from props or the data is gonna come from state. So we're gonna do the same thing. We'll show a loading. The difference though is that we're going to get a prop called render, which is our component to render. So down here, we'll return render this.state. So let's go try and use this as an example. So over here, I'll do import and post data. So we need to pass it a resource, post. And then we need to pass it a render. And for right now, I'm gonna, ah, yeah, so, yeah. Well, that part of it, but I think I also need a div. All right, so before we start to refactor our other code, so we can kind of like, really we can just ignore a lot of what post data is doing right this second. Really what it's doing, what I wanna show you here is that by giving it a render prop, we're giving this prop called render. It's just the name we came up with. And we give it a functional component really quick that just renders out hello world. You'll see that post data just takes that and just renders it down here and we'll pass it to state. So now what we're gonna do is we're going to update this to use one of our post lists. So we'll use post list first and try to get it to work. I remove all of that. And then we go over to post list and we can get rid of all this stuff we did. Loading works really well. And I'm gonna cheat. I have a, like I said, I have the working version, so let's see what I did not do. Looks good. I mean, I gotta spread the props, but I don't think that would be an issue yet. Okay, yeah, I thought that might be it. So one of the things I did is I changed this over to being a functional component. So we'll make that change. So by making this a functional component, we can take this data that we were getting passed to us from the state and just pull it out. And I can get rid of this. So I'm talking about. So, yeah, so let's recap this one just to kind of get in. And I think this one's a lot easier to understand. It's a lot less in direction and functions returning functions returning functions. So our post data component, it's expecting two properties, a resource property and is expecting a render property. And if we go look at the post data, we can see that it's going to handle the fetching of the data and then it's going to use that resource property to fetch the data. And then it's also going to use that render property to return that component and it passes the state directly to it. And so that's where we're able to make this a stateless component and just pull out the data part that we want and loop over it and output it. And if we were to go over here to the work list, surprising that I didn't rename that last time. No one said anything. Your guys are falling down on your job. Yeah. All right, so still got an issue. Ah, yeah, so one thing I need to do is I need to change this to work. I have low sugar apparently. Oh, duh. Helps if you paste the right thing in the right spot. When's this talking? How much more time do I got? 13 minutes. Oh my gosh. All right, so I'm going to just keep going. So the next thing we're going to do is we're going to start to use React Router. So React Router is an NPM package that you can use that's not built by the core team. It's built by another group of developers. So it's something that you're going to need to handle browser history. It's what's going to allow you to have links that you click on and it'll load different components and it's what makes your application more like a real application. So normally you would use NPM to install this, but here we're able to just go and get it and it's called React Router DOM. And so that'll pull that package in for us. And then I want to make two really, really simple files. So I'm going to make a home.js. I'm going to make a about.js. And I'm going to pull something in from React Router. So React Router has a lot of things that you can use, one of them is called link. So I'm going to pull this thing in called link. It's just a component. So I'll pull it in from React, Router, it's so important. So this is what it looks like coding when you have deadlines. My project manager's in the room, so she can get in. Five more minutes, it's all I need. Five more minutes, it'll be done. I promise, this feature's almost done. All right, so I have these two files about and home. So you're going to envision that these are pages. And what I'm going to do over here in my app is I'm going to update the render. And I'm going to return a bunch of stuff that's for React Router. So I'm going to need to pull a couple of these in. So I'm going to say import, switch. And then we're going to start to nest these and use them as components. So I have browser history. So this is what's going to handle updating and tracking the browser history as you move from page to page. Then we're going to have a switch, which is needed, to make it actually do its actual changing. And then what you do inside the switch is you're going to define a route. So this component takes a path prop. And then it takes a component. So in our case, it's going to be home. OK, so you can see that that home page is loading. And then I'm going to add another route to about. And I don't think this is going to work. So you see when I click it, it doesn't work. And part of that is because it's still matching to this one. So I have to set this to exact. And you'll see the about page works. And if I go back to home and back, and all these buttons kind of work. So this is how you use React Router. It's pretty quick and pretty simple to get set up to get going. So the things that I'm not going to be able to cover in this talk that I go into more in my other in the finished product is I actually use the thing it has a render props version. So it builds off of some of the stuff that we learned, where it uses render props. And so we use render props to dynamically load data and load posts. And we end up with this home page that has a blog. And then when you click on the blog, there's blog posts. And then you can actually go look at a post, right? So really, we're just the steps to take, as you can see, is the render props part. And then to use our post data component. So we kind of, in the end of this thing, I bring it all together for that part. So this is a part I do want to touch on. So this part is called Redux. So Redux is another thing that you would use to manage state inside of your application. So you can use set state like we've been doing, and that works really well. But eventually, you get to where you have these applications that are so large that it gets very hard to pass all these props all the way down the tree and pass these action events all the way back up. And Redux gives us the ability to have a global store where we can send events to it and pull data from it throughout the entire application. Because, again, because of stuff like this, where if that dot down at the very bottom needs to get data, it has to get past clear from wherever the data is coming from. And Redux can help us solve that problem. And Redux comes down to a couple of things. It has a global state, which is in a store. It uses pure functions to change the state. And it uses reducers. And it makes changes using dispatches. And it's extremely complicated to set up. The biggest thing I would tell you about Redux is that you probably don't need it right away. And so really try to avoid using it right away. It sounds like a really good idea, but it just turns into a headache really fast. So try to make set state work as long as you can. These are a lot of free resources. Those egg hit courses are free. And it's written by the guy who made Redux. And if you want to learn Redux, that's the place to go. Server rendering. I don't know if they'll talk about this, but there's a lot of reasons you might want to do server rendering. The big takeaway from server rendering is that you have to spin up a node express server. And to a degree, it's simple, but it also becomes a big headache. Here's some examples. There's some options. Next.js, which is a talk about here in a little bit. Gatsby.js is another framework you can use where you can write and make turn react sites into statically generated sites. And there's a thing called universal react components, which is another great way to get around having to really do server side rendering. And these are some really good courses that on Egghead and a YouTube channel that I would encourage you to check out if you want to learn more about these patterns. And that's all I got. I'll just say I apologize. That one didn't go near as well as the other ones. But definitely check out those links. All those links are there, yes. That's one way to do it. So if you wanted to, you could create an entire app and you could have like index.php, load that div. And then you could have used WP and Q scripts to load your bundled app and have it inject itself in that way. That's one way to go about doing it. And then for plugin development, I guess you could. So if you have templates of your own that you're loading, you could inject the react into those templates using in Q scripts. So you'll run all your code separately in JavaScript and it'll get bundled into one file. And you'll load that one file via WP and Q scripts. And then you can just write your JavaScript all day along just like I'm doing it. So like the import-export is kind of like how you would use WP and Q scripts in a WordPress application to load various scripts. But it kind of does, there's a lot more stuff involved with there with tree shaking and bundling and stuff like that that you get a lot more benefits by letting it do that and it becomes, you get a smaller package. Yes. Yeah, so if you're gonna go to the react route, I think you're just gonna wanna go all in on react. But if you're doing a vanilla JavaScript thing, that's a hard trade-off, that's kind of like how much react do you use in an application. I've done it both ways where I'll initially render the posts with WordPress and have PHP render those and then load mores and stuff will load more. But then you have duplication of efforts where you'll have a JavaScript template and a PHP template. I've even told the REST API to give me HTML and have it use the same PHP. I've done it so many ways, I don't have a good answer there, like they all suck, so yeah, all ends the best way to go. Yes. Yeah, yeah, I love create react app for sure. Oh yeah, like I use create react app, that's definitely the way to go if you're gonna start to build these. I just wish it had some server rendering stuff in there. I didn't really get to talk about it, but gatsby.js is really awesome if you have a basic kind of site that doesn't have users and logged in states and stuff. The fact that you can build entire react application that's static and super fast, and it's just pretty awesome. Yep, yeah, thanks.