What is the difference between React Node, React Element, and a React Component?

TL;DR

A React Node is any renderable unit in React, such as an element, string, number, or null. A React Element is an immutable object describing what to render, created using JSX or React.createElement. A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces.

React node

A React Node is the most basic unit in the React rendering system. It can be a React element, a string, a number, a boolean, or null. Essentially, anything that can be rendered in React is a React Node.

const stringNode = 'Hello, world!';
const numberNode = 123;
const booleanNode = true;
const nullNode = null;
const elementNode = <div>Hello, world!</div>;

React element

A React Element is an immutable, plain object representing what you want to see on the screen. It includes the type (such as a string for HTML tags or a React component), props, and children. React elements are created using JSX syntax or React.createElement.

const element = <div className="greeting">Hello, world!</div>;

// Using React.createElement
const element = React.createElement(
  'div',
  { className: 'greeting' },
  'Hello, world!',
);

React component

A React Component is a reusable piece of the UI that can accept inputs (props) and returns React elements describing the UI. There are two types of components: function components and class components.

• Function components: These are simpler and are just functions that take props as an argument and return a React element.

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }

• Class components: These are ES6 classes that extend React.Component and must have a render method returning a React element.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

Further reading

• React documentation: Rendering elements
• React documentation: Components and props
• React documentation: JSX in depth
• React documentation: State and lifecycle