В чем разница между элементом и компонентом React?

Элемент React — это объект, который мы хотим видеть на экране, который никогда не меняется. Элементы могут содержать в себе другие элементы.

Компонент React — это класс или функция, которые возвращают элементы. Входными данными для компонента являются пропы, а в качестве результата компонент отдает JSX дерево.

Рассмотрим эту информацию на примере. Пусть у нас есть 2 компонента Image и ImageBox:

function Image(props) {
  return <img src="{props.src}">;
}

function ImageBox(props) {
  return <div className="{props.className}">{props.children}</div>;
}

И третий компонент, который использует первые 2:

function App() {
  return (
    <ImageBox classname="new-image-box">
      <Image src="img.png" />
    </ImageBox>
  );
}

Компонент App возвращает JSX дерево, которое в дальнейшем превращается в следующий HTML:

<div class="new-image-box">
    <img src="img.png">
</div>

Мы получили реальные элементы, которые уже не изменятся.

Ранее, когда еще не было JSX элементы можно было создать при помощи специального метода React.createElement(). Следующий код позволит создать HTML, аналогичный тому, что был получен при помощи компонентов:

React.createElement(
    'div',
    {className: 'new-image-box'},
    React.createElement(
        'img',
        {src: 'img.png'}
    )
);