From the course: React: Design Patterns

Server instructions - React.js Tutorial

From the course: React: Design Patterns

Start my 1-month free trial Buy for my team

Server instructions

“

- [Instructor] All right, so now that we've learned a little bit about what container components are exactly and their main goal, what we're going to do next is take a look at a few examples that demonstrate how container components are used. Now, the way we're going to go about this is we're going to start off with a fairly simple and not very reusable example as you'll see, and over the course of the next few videos, we're going to improve it and slowly make it more and more reusable until we reach what I would consider to be a good stopping point. Now, the first thing you're going to want to do here is get the starting point of the exercise files, because there's some new things in there. The first thing to notice is we have this new container components Vite React project, so it's basically the same thing as what I did with the layout components project, but I wanted to keep those separate so that we could retain all of those examples, and inside this, what you're going to see inside the source directory is that we have a few new files. Now, let me just give you a brief rundown of what these files are. First of all, the app component, you'll notice that that's pretty stripped down there, it's just got this little your code goes here thing, we're going to use this to actually display our examples. And then we have this product info and user info components. Now, these are basically things that we're going to use to display data that we load from a server, and that's the last thing I wanted to talk about here is, this is pretty critical to our example here because, well, usually the main time that you're going to need things like these container components are when you need to load data from somewhere else such as a server. So what you see here is a simple Express server, and if you want to learn more about how this works in the context of full stack applications, you can feel free to take one of my other courses in the library about full stack development, but what you see is that this server file basically manages users and also products, and it's got a number of different endpoints for each. Basically, these are just paths that you can send requests to in order to do things like load data, right? So we see that we have an endpoint for getting the current user, an endpoint for getting data about some other user, an endpoint for creating new users, for loading all of the users, and also the same kind of things for products, right? So we have an endpoint for loading individual products by their id, an endpoint for getting all of the products, and finally, our app, our server will start up when our app reaches this point in the file. Now again, don't worry too much about this if you're not super familiar with backend development, you don't need to know all about Express servers and endpoints, things like that, I'll explain when we actually make requests to this server, what each request that we make is going to be doing. Now, I'm going to close all of these files here since we won't be making any changes to the server.js file anyway, and really the last thing that you're going to want to know here is how to run that server. The way you're going to do this, first of all, make sure that you actually run npm install inside this new container components directory, right? So you're going to need to change directories into there, so CD container-components, all right, I'm already inside there, so I'm not going to run that myself, and then you're just going to run npm install and that will make sure that Express and the associated libraries with Express are installed, and then you should be able to say simply node server.js, and you'll see server is listening on port 8080, and under this ports thing here, you should see that there's a new server that shows node server.js running on Port 8080. We'll see how to actually make requests to this in a later video. So anyway, that's all the setup that you should need for this section, so with that out of the way, we can start taking a look at how to work with these container components.

Contents