What's the relationship between a React component and ReactElement?

Question

I was reading a section of the React docs which uses the following vocabulary, but I can't figure out the relationship between them:

• A component
• A component's instance
• A component's backing instance
• A virtual DOM element
• A ReactElement

If and how are they related?

Answer 1

A virtual dom elements are javascript objects which represents your DOM nodes for better rerendering/diffing/creation support instead updating your DOM at every state change.

ReactElement is a simple javascript object representing visual pieces of your UI. Which can be html element or other react component. This javascript object will be associated with one or more virtual DOM element(s). This is for the sake of performance.

Component

According to docs it is

specification object that contains a render method

Which I would add :

for creating , combining and wrapping ReactElements with behaviour.

The behaviours can be the followings :

• bind data
• functions can be bound to DOM events
• extension/inheritance support for the components
• react's lifecycle support
• javascript flow control (hiding/ showing multiple components)

Component's instance plainly can be thought of as the same as object definition and object's instance.

Definition is a blueprint for creating the defined object(s).

For example if you have a List with multiple ListElement.

• List: holding grocery elements

  • ListItem : honey
  • ListItem : milk
  • ListItem : cereal
  • ListItem : fruits

One List definition --> one instance.

One ListElement definition --> multiple instances of that component

Component's backing instance(s) is/are the actually rendered element.

Note: when I say bind/bound I meant in the unidirectional sense.