So, what a constructor does is it gives you the ability to set up some processes automatically. So, if you have a number of processes that you want to run, such as setting data, or anything like that, then your constructor can allow you to do that.

Now, we're going to get into some other ways that you can do that later on, when we start talking about lifecycle hooks. Typically, what your constructor is going to do is it's going to allow you to set an initial state for your component, and then list out any custom functions that you want to utilize.

So, we're not really getting into all of that yet, we have entire guides dedicated to custom functions, and several of them dedicated to state, so we're not going to worry too much about that. In this guide, I simply want to show you what a constructor looks like, what its syntax is, and how you can call it.

So, you can only use a constructor inside of a class component, you can't do this inside of a functional component, this is something specific to classes. So, a constructor's a built-in keyword inside of JavaScript, and specifically JavaScript classes, and so you need to make sure that you don't use constructor as a name for any of your other functions.

So, if I start typing constructor here, and I give it parens, and then curly brackets, inside of here is where all of the logic, all of that setup state is going to occur. Now, there is a little thing that you need to keep in mind when you're using constructors in React, and I'm going to show this to you, because in case you run into this bug, I don't want it to freak you out.

So, I want a console log statement to run as soon as this portfolio container component's rendered on the page. So, I'm going to say "console.log", and then I'll just say, "Portfolio container has rendered," something like that. Now, you may think, because I told you, a constructor is called as soon as our item has been rendered on the page, so as soon as the app calls our portfolio container component, this should be called, this constructor runs.

But, there's going to be a little error here, so I'm going to switch back here, and you can see that it says, "Failed to compile." And thankfully, it gives us pretty much what the fix is right in the error message. It says, "SyntaxError: missing super() call in the constructor."

So what this means is, and this goes back to object-oriented programming and understanding how it works, what this does is whenever we are extending another class, so in this case we're extending this class component, it has all kinds of cool and helpful functions that we need to bring in.

In JavaScript, in order to make that happen, we have to use this super() keyword. So what that does is it tells the component, the class component, it says, "I want you to bring in all of your cool functions and I want to have access to them." Just by writing "extends component," that doesn't do every, we also have to call super().

So, super() is saying, "I want you to go up to the parent class," that we're importing from. Right now, that is this component class here, "and I want you to bring in all of it, because it's considered a super class," and this is a child class.

So, what we can do here to fix that error, is just to say "super()," and then call it, because it's a function, and now hit Save. So now, if you switch back, you can see that our error is gone.

Now, if you open up the JavaScript console, and remember, you can do that by typing command+option+J, or by right-clicking and clicking on Inspect, and then going to Console, then you can see that that printed out.

So, our console log statement of, "Portfolio container has rendered," has now been rendered on the page, or it's been printed out in the console, and it even shows where we're calling that. We're calling that from line nine inside of the portfolio container component, so everything there is working properly.

Now, if that feels like it's not that helpful, it's because we haven't gotten into all of the different ways that you're going to be able to use this. So, this is going to be... the constructor's going to be where you are going to be placing all of your initial state. It's going to be where you're defining all of the data points that you're going to be using inside of this specific component, so we are going to be using it for quite a bit more than you can see right here.

But the goal of this guide was to simply walk you through what the syntax was for using a constructor, and making sure that you understood what it was doing, that it is setting up the component, so whenever it is rendered... another term for that is instantiated.

It's a big, scary computer science term called instantiated, all that means is that we're taking a class, and we're creating a real-life version of it. So, in other words, we are taking that class definition, of portfolio container, and then we're saying, "I want you to actually create one of those classes, and I want to render it right here on the page." Whenever we do that, this constructor is called.

Resources

• Source Code