ES6 classes React questions

JavaScript
1

ES6 class component vs a stateless functional component. simple example of differences.

Stateless vs Stateful component.

Can ES6 class component also be stateful or stateless?

What does it mean:

  constructor(props) {
    super(props);

What are props? is that a reference to the properties of the parent element you want the child to inherit.

Is the constructor the parent element that is referenced?

Is it correct to say super(props) is used when we want to bind this to the parent constructor? Examples please.

What is the truth:
A developer told me classes are being depreciated so its not necessary to understand this documentation to work with react:
Mozilla Javascript Class Documentation

2

No, classe components are not being deprecated, the developers have been very clear about that. There is an API in React called hooks, which allows function components to have state. This is a pretty good API: people like it very much, and that will probably mean that in the future, classes will be used far less than they are now. But classes are not being deprecated at all.

class component also be stateful or stateless?

It doesn’t need to have any state. It’s just much easier to write a function in that case.

class MyComponent1 extends Component {
  render () {
    return <p>{this.props.name}</p>;
  }
}

// Vs

const MyComponent2 = ({ name }) =>
  <p>{name}</p>

What are props?

They are the key:value pairs you pass into the component. <MyComponent prop1="foo" prop2={1} />

Is the constructor the parent element that is referenced?

No, a “class” in JS consists of a function that creates an object and generally some functions (methods). Those functions get added to the prototype of that object rather than the object itself, meaning they get shared between all objects of that type. This is not a React thing; it is just how JS works. The constructor is the function that creates the object.

Is it correct to say super(props) is used when we want to bind this to the parent constructor? Examples please.

It is used when you want to access this.props inside the constructor, that is all. You can access this.props elsewhere inside the class just fine, but the constructor is the very first thing that gets executed, so if you need to access the props inside it you need the super() call. Again, this is a JS, not a React-specific thing

class MyComponent extends Component {
  constructor () {
    // Nope, this doesn't work
    this.someProperty = this.props.foo;
  }
}

class MyComponent extends Component {
  constructor (props) {
    super(props);
    // Yep, this works
    this.someProperty = this.props.foo;
  }
}