Другой способ определить React-компонент - использовать синтаксис class ES6.

Подробней о классах смотрите в этом уроке

В следующем примере Kitten расширяет React.Component :

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }
render() {
return (
<h1>Hi
);
}
}

Это создает класс ES6 Kitten , который расширяет React.Component класс. Таким образом, класс Kitten теперь имеет доступ ко многим полезным функциям React, таким как локальные состояния и привязки к жизненному циклу. Не беспокойтесь, если вы еще не знакомы с этими условиями, они будут рассмотрены более подробно в последующих задачах. Также обратите внимание, что класс Kitten имеет constructor определенный внутри него, который вызывает super() . Он использует super() для вызова конструктора родительского класса, в данном случае React.Component . Конструктор - это специальный метод, используемый при инициализации объектов, созданных с ключевым словом class . Это лучшая практика для индивидуального вызова компонента constructor с super , и передать props для обоих. Это гарантирует правильность инициализации компонента. Пока что знайте, что это стандарт для включения этого кода. Вскоре вы увидите другие варианты использования конструктора, а также props .

Замечание: Хоть здесь и сказано "Пока что знайте, что это стандарт для включения этого кода", все же в таком виде данный конструктор не имеет никакого смысла, ведь в нем просто происходит вызов родительского конструктора. Здесь нет никакой дополнительной логики. Более того, в эслинте есть отдельное правило, которое может ругаться на такой вызов, советуя убрать его вовсе. Тем не менее, в дальнейшем вы увидите примеры, где часть логики задается именно в конструкторе. А вот функция render - обязательная. Всякий реакт-компонент должен что-то возвращать, и делает он это именно в методе render.

MyComponent определен в редакторе кода с использованием синтаксиса класса. Завершите запись метода render чтобы он возвращал элемент div, содержащий h1 с текстом Hello React! ,