Основная цель компонентов — разделить весь пользовательский интерфейс на множество частей.

В React есть два типа компонентов

1. Функциональный компонент

2. Компонент класса

Функциональный компонент:

Функциональный компонент работает как функция javascript, принимает props (свойства) в качестве аргументов и возвращает элементы реакции.

Покажем, как работает функциональная составляющая

Здесь имя функционального компонента — Welcome, в качестве аргумента он принимает props. В теле функции приветствия она возвращает h1 с props.name.

Итак, почему мы говорим, что это функциональный компонент? ответ в том, что это похоже на функцию javascript, поэтому ее называют функциональным компонентом.

Компонент класса:

Прежде чем изучать компоненты класса, нам нужно знать, как написать класс в ES6.

class MyClass {
  constructor() {
    this.answer = 42;
  }
}

const obj = new MyClass();
obj.answer; // 42

Мы используем синтаксис класса ES6 для написания компонентов класса.

Теперь нам нужно добраться до точки, есть ли разница между компонентом класса и функциональным компонентом? Наши два примера дают нам одинаковый результат. Но есть некоторые отличия от них. Во-первых, у обоих разный синтаксис. Во-вторых, функциональные компоненты принимают props(properties) в качестве аргумента и возвращают элемент React. С другой стороны, компонент класса расширяет React. Component и создайте функцию рендеринга, которая возвращает элемент React.

Удачного кодирования :)