Question
What is a component’s instance?
Answer
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 {
render(){
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.