Doubt in the structure of the code

Asked

Viewed 52 times

1

In that code:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Well, my doubt is:

React.Component is a class?

Render() is a method?

and this one:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

Constructor is a method?

The Props is a parameter??

And the super is a function??

These questions may seem silly but I am trying to understand as much as possible the structure of the language and framework.

I have read the documentation of both JS and React but I still get a little lost

javascript algorithm react

  • Apart from the case of props (which I don’t quite know how it is passed because I don’t use Law), the answer is yes to all questions.

  • Yes for everyone... !!! studied well...

2 answers

3

Opa Matheus, most of these questions are in relation to the JS,

Constructor

It is a special type of method to create and start an object created by the class.

Super

A basic class of React inherits the class React.Component, to pass parameters to the parent class it is necessary to use the method super, therefore it is used in this case to pass the properties of the component to the parent of the class which is the React.Component.

Props

It is the properties that the React receives through the tags, below an example:

<Component title="Nome" />

In this example above, title is a property that will come in props of React.

1

The React.Component is a class?

Yes, it is a class. As specified in API of React, to create a class component, you must extend the class Component, exposed by React.

The render() is a method?

Yes, it is a method. In the context of React, all class components must have a method render to render the HTML of that component.

To learn more about the general workings of methods in Javascript, see documentation on MDN.

The constructor is a method?

Yes, it is a method. However, special. According to the MDN documentation, a constructor is a special method for creating and initializing an object created from a class, which means it will always be executed when the class is instantiated.

In the context of React, whenever the component is instantiated, the constructor will be started. Usually, this only happens once.

The props is a parameter?

Yes. Whenever you render an React component, you have the ability to pass props, which can be accessed through the first parameter of the class constructor.

<ListItem name="Estudar React" />

The super is a function?

Not! The super is a Javascript keyword used to access the parent class of a class.

In the context of React, the super shall be used to pass the props for the parent class React.Component.

I will not go into too much detail about why that need. If you want, however, to know more about it, I recommend reading the excellent article "Why We Write Super(props)?", of Dan Abramov.

Browser other questions tagged javascript algorithm react

You are not signed in. Login or sign up in order to post.