React Component Constructors

React is hard to learn from scratch. After learning basic HTML and Vanilla JS then ES6, we are better poised to recognize the syntax and intricacies that come with using React.

The biggest building block of React is the Component. You can build onto component by creating your own classes that render and return JSX to create a dynamic web experience.

Artist rendering of building blocks

To “construct” those building blocks, you can use Constructors to add more variability to your Components. Let’s explore Constructors in a little more detail to become more comfortable creating Components.

Let’s start out by creating a class and continue from there:

class Explanation extends Component {

Initialization


constructor(props) {

Until now we have black boxed what a Constructor is and taken it more or less as a given. If we only look at the code above, it’s easier to see what it is: a method of the Component class.

This method can take a parameter any properties passed down to it when our Explanation class was called, usually in another file where Explanation was imported. These can be used later on when setting states. Conversely, given no properties were passed down, we can also call the constructor method with empty parentheses.

It is important to use the constructor method near or at the top of our class to be utilize what we build inside as we continue adding onto Explanation.

Super

super(props);

Perhaps more so than states, the super method is important to always write.

Super is what allows us to use the class’ properties inside the constructor. That is to say, this will be undefined whenever it is used in the constructor, even though props will be. That will affect the way we can build our constructor massively, all the way down to the binding.

The scope of this method is only inside the Constructor method, as this.props will work in the Render method after the constructor and any functions are declaration.

If no properties were passed, you should still call the super method like this:

super(this);

States

this.state = {
knewBefore: false,
learning: this.props.attentionLevel
}

States are initialized like any other key-value pairs object. They will be attached to every instance of the Explanation class that is called, albeit independently.

It is easiest to think about states as something familiar, namely Schemas. Like schemas, values are set whenever <Explanation attentionLevel={“ * ”} />is called. And like a model, its values can be changed and can differ from other times Explanation is called.

The advantage of states over properties is that once assigned in the call, properties are immutable and states are malleable. Variability is a great boon, especially when dealing in an interactive environment with many possible users.

Binding

   this._sendKnowledge = this._sendKnowledge.bind(this);
}

Binding is the manner with which to tie functions declared after the Constructor to this instance of the Explantation.

Though optional to perform this action inside the Constructor, though there are other ways to try to make sure that the function is only called on a particular instance of the class, such as binding inside the Render method or with arrow functions as well therein, it is recommended to bind in the Constructor. This is due reliability and due to organizational concerns.

Our Constructor Is Now Complete!

constructor(props) {
super(props);
this.state = {
knewBefore: false,
learning: this.props.attentionLevel
}
this._sendKnowledge = this._sendKnowledge.bind(this);
}
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.