What is a component's instance?


What is a component’s instance?


Let’s remember that React components are above all JavaScript classes, they are all being created and extended from an already existing class from the React library: Component

class MyComponent extends React.Component{

Now, because they’re extended from an existing class, their render method is 1, a requirement for every component and 2 what is called whenever we invoke the class, and thus that is what we see, the HTML return from that render method.

now instantiating a component is like invoking, you are trying to call the class and render its content, how React goes about it is using JSX which allows us to invoke a class component as if it was an HTML tag, so if I wanted to render whatever I have in the render method in MyComponent on the render’s return of another component I just need to use the class name in between the carrots like an opening/closing HTML tag:

class RenderingComponent extends React.Component {
    return <MyComponent/>;

That is what is called an instance, which it’s really just a version of the original class, and in the case of React, it will return whatever HTML it has in its own render method.