And your very first thought may be, why didn't we just do that in the very beginning? But this speaks directly to my goal of wanting to teach you not just how to build a portfolio application, that would be very easy.

My goal is to teach you how to build any type of React application, and in order to do that, I wanna walk you through what my personal process, and this is also the process I've seen many other professionals React developers do, which is to build the most simple implementation first.

The reason why we wanna do that is because I don't want any other part of the application to get in the way of our feature not working. So, in other words, if I were to be building out some type of feature, especially one that maybe I'm using a library I've never used before.

The very first thing that I do is I pull it into the app component because I want to be able to just test it out. If I place it in one of the other components and it doesn't work, the issue might be the library. But it also might be that other component, that child component.

So for example, if I would have taken all of that Axios code and put it into the home component right away and it didn't work, the issue may have been Axios, but it also could have been something to do with the home component. And then all of a sudden, I'm having to debug multiple elements of the application, as opposed to just focusing on the feature I'm trying to build. So that's why I follow that process.

So let's go now and see what we need to do in order to move this code into our home component. And hopefully, you'll see that this is relatively straightforward. So if you notice, the main changes that we made is we created this constructor, we bound the getPortfolioItems function to the class, so that it has access to this, and then we called it. So that's all we need to do inside of our home component.

So, let's open this up side by side. So I'm gonna say home, and so now you can see we just have this homepage and we're bringing in the PortfolioContainer. Now since the portfolio container is gonna be where all of our portfolio items go, I think it makes sense for us to place them inside of here.

So, this is kind of following the path of traversing this tree of components until we find the right spot to place our data. So I'm gonna open up our portfolio container and now you can see we're getting closer, now we have access to our portfolio items, which is eventually where we're going to be placing all of our data.

So I think this is gonna be the most natural spot to make the data call, and we already have some of the elements, such as the constructor, we already have state, we already are binding a few items. So let's start moving each one of these code items right there.

I'm gonna first grab this line and I'm going to paste it in here, and then we can now get rid of this constructor. Then let's grab this getPortfolioItems function call and we'll add it inside of this class, let's give us a little bit of space, and now we can call getPortfolioItems and I'm gonna place that inside of the render right above return, once again, and give it some space.

And so now there's one other item we have to do, we'll get an error if we try to test this out now, we need to also bring in Axios. So nothing else in the app component is using Axios, so I can just remove it, and then I'm going to paste it in right here under our React and Component import.

Now, one other convention that I wanna discuss that you may have noticed that I've kind of been doing and haven't really discussed it quite a bit, is, you notice how I like to separate my import calls? So, I usually will put react and a component and anything like that at the very top of my list of imports and then I like to import any of the node modules right below that and then I will separate that out, and then I will import all of the internal components. And that's a convention you'll find quite a few other React developers following.

So let's see if we've moved everything successfully and see if it this works. I'm going to clear this out and hit refresh. And you can see we're still getting our response data. So now we have response data, if I grab data I have portfolio items right here and so everything is still working.

Hopefully, this also gives you a little bit of insight into how powerful component is driven architecture is. Kind of like what we did in the last section, where we were able to simply move around components and call them and duplicate them and be able to treat them as encapsulated modules, you can see with just moving a few lines of code from one component to another, we're able to still maintain the identical behavior, but now our code is placed where it's probably the most logical spot for it.

So that's what we're gonna do in this guide, and in the next guide, we're gonna see how our new function, our get portfolio items, can update our state and how we can render it out directly into the website.

Resources

• Source Code