How react works:

Components

Components are what we write to describe a piece of UI. A component is just a regular JavaScript function, but it returns a React element (element tree), and we usually write this as JSX.

A component is a generic description of the UI, so we can see components as blueprints or templates. With a single component, React can create multiple component instances.

Instances

Instances are created when we use a component. Therefore, we can say that an instance is a specific occurrence or instantiation of a React component, representing the actual physical manifestation of that component. Meanwhile, the component function itself, or the component definition, represents what we wrote before it is called or rendered. Each instance holds its own state and props, and each also has its own lifecycle—it can be created, mounted, updated, and unmounted.

Most of the time, we use the terms 'component' and 'component instance' interchangeably. For instance, instead of saying 'component instance lifecycle,' we simply refer to it as the 'component lifecycle.' Similarly, we often say that the UI is made up of components, although technically we mean component instances.

React Elements

A component instance returns a React element. Behind the scenes, JSX is converted into multiple React.createElement() function calls. A React element is the result of these function calls and contains all the necessary information to create DOM elements. The DOM elements are the actual visual representation of the component instance in the browser. It's important to note that it's not the React elements themselves that are rendered to the DOM; rather, they are converted into DOM elements during the rendering process.

Component ➡ Component Instance ➡ React Elements ➡ DOM Elements (HTML) .

Instances and elements in practice

I'm going to create a simple UI for this👇👇

It looks like this with some basic styles added👇

So, we can see a component instance simply by using it and logging it to the console. Let's console.log the TabContent component to see its instance.👇👇

From the type shown in the console, it's evident that when React encounters a component instance, it invokes the associated function or component. So, if React internally calls our components when rendering them, why don't we simply call the component ourselves? For example, we could log the component instance by directly calling the function. Line 29👇👇

Although this method works just fine and also creates a React element, it's important to note that there's a distinction between directly calling the component function and React internally rendering the component.👇👇

When we call the component using console.log(TabContent()), React no longer recognizes it as a component instance but rather as a raw output element, with the type being the content of that component, such as a div. It's important to use components in a way that allows React to see them as component instances, rather than simply outputting raw elements, as demonstrated in the example above.

To be continued....

Thank you for Reading..🙂💪