What are the differences between React Component and React Element?

A ReactElement is a light, stateless, immutable, virtual representation of a DOM element. A react component render() function returns a DOM (virtual DOM) tree of the react elements behind the scenes.

There is some complex mapping and diff logic involved, but basically, these React elements map to the DOM elements.

React Elements

A React Element is just a plain old JavaScript Object without its own methods. It has essentially four properties:

• type, a String representing an HTML tag or a reference referring to a React Component
• key, a String to uniquely identify an React Element
• ref, a reference to access either the underlying DOM node or React Component Instance)
• props (properties Object)

React Elements may contain child elements and thus are capable of forming element trees, which represent the Virtual DOM tree.

Example of React Element

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
  )

React Component

A React Component contains a state and has access to the React Lifecycle methods. It must have at least a render method, which returns a React Element(-tree) when invoked.

Please note that we never construct React Component Instances ourselves but let React create it for us.

Example of React Element

const Login = () => (
  <div>
   <p>Login</p>
   <button>Continue</button>
   <button color='blue'>Cancel</button>
  </div>
);