React: What is a React element?

In a nutshell

In the host environment, a host instance (e.g., HTMLDivElement) is the smallest building block. In React, the smallest building block is a React element – a plain JavaScript object that describes a host instance.

// JSX is a syntax sugar for these objects.
// <button className="blue" />
{
  type: 'button',
  props: { className: 'blue' }
}

Like host instances, React elements can form a tree:

// JSX is a syntax sugar for these objects.
// <dialog>
//   <button className="blue" />
//   <button className="red" />
// </dialog>
{
  type: 'dialog',
  props: {
    children: [{
      type: 'button',
      props: { className: 'blue' }
    }, {
      type: 'button',
      props: { className: 'red' }
    }]
  }
}

React elements are immutable. You don’t change its properties or children. If you want to render something different, you replace it with a new React element.

React elements can be thought of like frames in a movie. They capture what the UI should look like at a specific point in time.

Sources

• React as a UI runtime – Overreacted