‫Let's start this section
‫with the conceptual difference between React components,
‫Component instances, and React elements.
‫Knowing about this difference will hopefully
‫make it a bit more clear what actually happens
‫with your components as you use them.
‫And also this is a pretty common interview question.
‫And so this topic is definitely worth learning about.
‫And let's begin by taking another look at components.
‫So components are what we write
‫in order to describe a piece of the user interface.
‫And the component is just a regular JavaScript function,
‫but it's a function that returns React elements.
‫So it returns an element tree.
‫And we usually write these elements using the JSX syntax.
‫Now a component is a generic description of the UI.
‫So we can essentially think of a component as a blueprint
‫or a template, and it's out of this one blueprint
‫or template that React then creates one
‫or multiple component instances.
‫Now, React does this each time that we use the component
‫somewhere in our code.
‫For example, the tap component that we saw
‫in the last slide is used, so it is included three times
‫in this app component.
‫And so therefore, three instances of tap are placed
‫in a component tree.
‫So in our actual application.
‫Behind the scenes, this happens
‫because React will call the tap function three times.
‫So one time for each instance.
‫So we can say that an instance is like the actual
‫physical manifestation of a component living
‫in our componentry.
‫While the component itself is really just a function
‫that we wrote before being called.
‫And actually, it's each instance
‫that holds its own state and props
‫and that also has its own life cycle.
‫So basically, a component instance can be born,
‫it can live for some time until it will eventually die.
‫So it's a bit like a living organism really.
‫Now in practice, we many times just use the terms component
‫and component instance interchangeably.
‫For example, we just say component life cycle
‫and not component instance life cycle.
‫And we also say that a UI is made up of components,
‫not of component instances,
‫even though instances
‫would technically be more accurate.
‫Okay, so just keep that in mind in the future
‫when you read documentation
‫or some stack overflow post or something like that.
‫But anyway, as React executes the code
‫in each of these instances,
‫each of them will return one or more React elements.
‫So as we learned when we first talked
‫about JSX behind the scenes, JSX will actually get converted
‫to multiple React.createElement function calls.
‫Then as React calls these create element functions
‫the result will be a React element.
‫So a React element is basically the result
‫of using a component in our code.
‫It's simply a big immutable JavaScript object
‫that React keeps in memory.
‫And we will take a look at this later in our account.
‫But what is this object actually?
‫Well, a React element basically contains all the information
‫that is necessary in order to create DOM elements
‫for the current component instance.
‫And so it's this React element that will eventually
‫be converted to actual DOM elements,
‫and then painted onto the screen by the browser.
‫So based on all this, the DOM elements are the actual, final
‫and visual representation
‫of the components instance in the browser.
‫And again, it's not React elements
‫that are rendered to the DOM.
‫React elements just live
‫inside the React app and have nothing to do with the DOM.
‫They are simply converted to DOM elements
‫when they are painted on the screen in this final step.
‫Okay, so this is the journey
‫from writing a single component to using it multiple times
‫in our code as a blueprint all the way
‫until it's converted to a React element,
‫and then rendered as HTML elements into the DOM.
‫So I hope you found this interesting and useful,
‫and if you did, then let's move on to the next video,
‫and take a look at all this in code.