How Sub classing with extends for React or Javascript work?

Question

I understand sub classing with extends for example

class Car extends Vehicle {}
class Dog extends Animal {}

But with React, you may see

class HelloMessage extends React.Component {}

What does the dot between React and Component mean? How does it work in React and in vanilla Javascript?

CertainPerformance · Accepted Answer · 2019-08-08 01:06:14Z

4

Classes do not have to be standalone variable names - they may be properties of objects as well. So extends React.Component, absent any other context of what React is, just means that React is an object with has a Component property which is a class.

For an example of how to emulate this in vanilla JS:

const obj = {
  Foo: class Foo {
    doThing() {
      console.log('doing thing');
    }
  }
};

class MySubClass extends obj.Foo {
  subMethod() {
    console.log('submethod');
  }
}

const s = new MySubClass();
s.doThing();
s.subMethod();

React is doing the same sort of thing. It's just a way to organize data as properties of objects.

answered Aug 8, 2019 at 1:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wwwrrrxxx Over a year ago

Awesome! Thanks for your explanation!

Collectives™ on Stack Overflow

How Sub classing with extends for React or Javascript work?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related