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.