React Deep Dive: Element vs. Component

This year, I'm reading through the React docs and taking notes as I go.

React Element

A React Element is an object representation of a DOM node. It is a plain old object, and not an actual DOM element. In essence, it is a description of what you want to appear on the screen (oh, and it's declarative!).

{
  type: 'h2',
  props: {
    className: 'heading heading-medium',
    children: 'React Deep Dive'
  }
}

const header = (
  <h2 className="heading heading-medium">
    React Deep Dive
  </h2>
)

An Element has a type, props, and any children nested inside of it. The type can be either a DOM Element (like 'h2', in the above example), or a Component Element (like the Heading described below).

React Component

A React Component is composed of React Elements. It is either a class with a render function, or a stateless functional component. It takes props as an input and returns an element tree as its output. Component names start with a capital letter (Heading vs h2).

const Heading = (props) => {
  return (
   <h2 
    className={`heading heading-${props.size}`}
   >
    {props.children}
   </h2>
  )
}

I found this blog post (from 2015!) very helpful in understanding the differences.