React Components, Elements, and Instances

react_elements.md

Element

An element is a plain object describing a component instance or DOM node and its desired properties

It contains only information about the component type (for example, a Button), its properties (for example, its color), and any child elements inside it.

An element is not an actual instance. Rather, it is a way to tell React what you want to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: type: (string | ReactClass) and props: Object1.

DOM Element

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

Component Element

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}