React - Create a React Component

JavaScript
1

Tell us what’s happening:
I’m very confused about this part of the code:

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

I have no idea how it works.
Is it perhaps explained in greater detail in the later challenges?

Challenge: React - Create a React Component

Link to the challenge:

1 Like
2

Hello, can you try and explain what exactly about it you are getting confused with and we can try to make it more clear? The challenge offers this up as an explanation

“ This creates an ES6 class Kitten which extends the React.Component class. So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks. Don’t worry if you aren’t familiar with these terms yet, they will be covered in greater detail in later challenges. Also notice the Kitten class has a constructor defined within it that calls super(). It uses super()to call the constructor of the parent class, in this case React.Component. The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component’s constructor with super, and pass props to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as props.”

3

I’m not sure what exactly happens when the Kitten class extends the React.Component class, what even is React.Component?
Also I don’t understand the use of constructor nor the use of the super function here.

4

Thanks for that. So the line below is saying that the class Kitten extends React.Component. What that means is basically the Kitten class now has access to many useful React features, such as local state and lifecycle hooks. The challenge will go over these terms at a later times, but for a class to be able to use them they have to extend react. Extend is just giving a class access the a component, and in this case its React.Component. Without getting the access you wouldnt be able to use the React features.

class Kitten extends React.Component

The constructor here is used during the initialization of an object. So for example, if you wanted to create a Kitten object in your code then you would have to have and use the constructor to do that. Super is just calling the constructor of the parent class, which in this case is React.component because you are extending that.

When you are extending a class, the class you are extending is considered the parent and the class you are extending it inside of os considered the child class. The challenge explains, its just best practice to use the class, and the parent constructor. You will learn more about these as you go through react. The biggest thing at the moment right now though is it is best to have them both

5

I know this is a small lesson and it says it all is going to be explained later, but I don’t think anything should be taught this way - by dumping a ton of terms on our heads and waiving everything else off by saying it’s going to be explained later.
And Cody, all you really did here was just reciting the lesson description.
Somebody probably should rewrite this.