Classes, Inheritance, and a Closer Component Look

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 230,337 students

Lecture description

An exploration of classes, JavaScript class-based inheritance, and an investigation of React.component.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Hey there! Let's write some temporary code in the index.js file to explore how classes work. First up we're going to create that generic Animal class that was brought up earlier in the overview. So with the class keyword let's make the animal class. Then we have the class body with a pair of curly braces for our class. The one method that we definitely want to implement is the special constructor method. So add the constructor method right away, This method allows us to define the properties the instances of this class we'll have for the animal class that was name and age and to attach those properties. We use this special this keyword. So have this.name as well as this.age. The this keyword is a powerful one. It's a special object that gets recreated uniquely for every instance of the class. So one animal instance is going to have its own this object. A second animal instance will also have its own this object to work with as well. This will get more clear once we actually create instances of the animal class. All right next let's provide some input parameters to the constructor. The input parameters are used to pass in values when we're actually creating instances of the class. The two parameters that we want for now are going to be name and age. And that matches the current properties that we have defined for the animal class with these inputs. We need to make sure that the instances have their properties set to these matching values. So make sure that this.name is equal to the incoming name value. Likewise the age property is going to be equal to the incoming age value. Finally, for this animal class, Let's add a speak method. So it's going to have another method besides a constructor. And this is going to be called speak in the speak method. Let's fire console.log of the name and age in an overall message. So it's own line will have a console.log that says I am this.name and then and I am is the third input and then this.age is the fourth input, and then the final input is years old. So you can have as many parameters to the console.log as you like, and in between each parameter you're going to find that there is a space printed in between the inputs. Cool let's create actual instances of its animal class. We're gonna create two of them and first let's assign a variable for the first one called animal1. So make this a constant, and a constant cannot be reassigned. To make the instance you use the new keyword. And then you directly refer to the class name. So we have the animal and then to invoke the instructor of the animal class we have a pair of parentheses. And now we can pass in values for the name and age of this instance for this animal one instance. Let's say that the name is Simba and then the age is going to be 3 Now that we have the animal class we can call it speak method. So let's have animal1 do speak so far. Animal one does speak. All right, if you don't have the application running already head the command line and fire npm run start in the portfolio directory. Once you have all of these changes, so make sure in the command line you have npm run start going. And once it's there visit the application in the browser. Go to the console tab in the developer console. If you do a fresh restart you're going to see the log of I am Simba and I am 3 years old. Cool! So from the Speek method we get the log of I am this. name which was Simba and I am this.age which was 3 years old. Very nice! Let's take a closer look at the actual animal by adding a log of the animal1 object itself. Now I'm going to use a tool called sizeup to move this on the right. So this is the sizeup tool. It is a paid developer tool but there are free alternatives out there that do a very similar window resizing functionality. The purpose is that I just want to see the logs on the right while I make changes here on the left. But again let's look at the actual instance itself by doing a direct log of the animal one object. As I say that, create-react-app will pick up the change. And here is the log of the animal object. So here it has a property of age which is 3, and the property of name which is Simba. Cool so that is our actual animal class instance. All right. Nice! That covers a generic class. Now let's move on to the concept of inheritance. We've seen this with react extending the Component class already from react. Now let's apply this to a new line class that extends the animal class. So in our code let's make a new class called Lion and this will use the extends keyword to extend our existing animal class. The benefit is that we now have a lion class with all the properties and methods from the original animal class but then it can define its own properties and methods in addition to that. The one catch though is that the constructor for this needs to have the same starting parameters as the original class so it needs a name and age but after that we can declare new inputs, for the lion like furColor and speed. So here's furColor. I'm using camelCasing so make sure that the C is capitalized to combine words into one word, and then speed that fourth parameter.is Now you might be wondering if we have to do this.name equals name in the constructor as well as this.age equals age in the constructor. If we're extending the animal but that code already exists in the constructor of the animal class. So in this situation to invoke the constructor of the parent class we use these super keyword so we can pass in the name any age to the constructor of our parent class which will take care of setting this.name and this.age. Already within the line. And after that we're gonna do similar code to set the furColor property to the incoming furColor value and the speed to the incoming speed value. Nice! Another lion class can have its own unique roar method to work with its new properties. So let's add a roar method within here and this will do a console.log and let's have it say Roar I have this.furColor and this line is gonna be rather long so I'll go ahead and extend out my window for and I can run this.speed miles an hour. Make sure you have that entire roar method. To make it more readable, actually a better place. Each of these inputs on its own line so that way it fits within the view and with that I'm also going to make an instance of the line class. So we're gonna have a new constant called lion1. And this time we're gonna make an instance of the lion class. Let's call this guy Mufasa, the age is 20, golden is the first color, and this speed is 25. Now we can make this lion1 speak just like the original animal since it's gotta have access to the method originally declared in the animal class so we can call lion1.speak, but likewise we can do a lion1.roar since that's defined within the line class we can also log the lion1 object to check it out in greater detail. As you save this you should find that the browser now contains a log of I Am Mu- fasa. Cool! The speak method worked ,then also roar. So it uses the golden furColor property and the twenty five speed property. And the instance itself is based on the lion class as seen by the Lion class name within the actual log. All right so that covers how the class and inheritance system works in JavaScript. And that gives us some insight into the react component inheritance model. So in the App.js file our app component extends the Component class. Therefore this makes the app component inherit properties and methods that were originally defined in the Component class from react. We can take a look at what those methods and properties are in the adult she has file. Let's declared two new classes. One is gonna be a regular javascript class that doesn't extend the Component class and the other one will extend the Component class so above the component. Let's create a regular class. This one won't extend anything. But then we'll create a Component class. And this extends the component that we're getting from the react module. All right now that we have these classes well we can create instances of the classes. So let's make a huge constant called regularClassInstance. That is the result of a new instance of the regular class. And for comparison we'll do the same thing for a componentClassInstance constant. That is an instance of the Component class that we have above. In order to dig into these let's add a log of both. So add a console.log of regularClassInstance Go ahead and copy the name and paste it in to save some time and then I'll do the same for the component class instance. So add a log of componentClassInstance, and then the actual object itself. So make sure you have all that code. And once you do save the file and then you can check out the logs in the application and then give it a refresh. And what you'll find at the top is that we have this regular class instance which is indeed an object based on the regular class type but then we had this componentClassInstance which didn't do anything different but extend the Component class. But if you expand it has all these inner methods like contexts, props, refs, update, or is mounted and other things so by updating the values for these inner properties and calling the methods in the component class instance, react knows how to update the application based on its components. In the course we're gonna dive deeply into the topics that you're seeing here for these inner properties. Most immediately we'll look at state, props, and mounting. Overall I hope this has made the component part of React feel more clear and given you insight into how react components actually work under the hood. Now that we've taken a closer look at this let's focus on the next core concept of react.