How to Instantiate a React Component
This is one of the things i had to learn today as i navigate React component topics.
I’ll briefly explain JavaScript classes, to help clarify React components. Technically they are not related, which is important to note, but it is a fitting analogy for you to understand the concept of a component.
Classes are most often used in object-oriented programming languages. JavaScript, always flexible in its programming paradigms, allows functional programming and object-oriented programming to co-exist side-by-side.
To recap JavaScript classes for object-oriented programming, consider the following Developer class:
Each class has a constructor that takes arguments and assigns them to the class instance.
A class can also define functions that are associated with a subject (e.g. getName), called methods or class methods.
Defining the Developer class once is just one part; instantiating it is the other. The class definition is the blueprint of its capabilities, and usage occurs when an instance is created with the new statement.
If a JavaScript class definition exists, one can create multiple instances of it:
The concept of a class with definition and instantiation is similar to a React component, which also has only one component definition, but can have multiple component instances:
Once we’ve defined a component, we can use it as an HTML element anywhere in our JSX.
The element produces a component instance of your component, or in other words, the component gets instantiated.
You can create as many component instances as you want. It’s not much different from a JavaScript class definition and usage.
However, technically a JavaScript class and React component are not the same, just their usage makes it convenient to demonstrate their similarities.
Happy coding!!
How to Instantiate a React Component was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.
This post first appeared on Read More