Создать классовый (class-based) компонент
Другой способ определить React-компонент - использовать синтаксис class ES6.
Подробней о классах смотрите в этом уроке
В следующем примере
Kitten расширяет React.Component :
class Kitten extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>Hi
);
}
}Kitten , который расширяет React.Component класс. Таким образом, класс
Kitten теперь имеет доступ ко многим полезным функциям React, таким как локальные состояния и привязки к
жизненному циклу. Не беспокойтесь, если вы еще не знакомы с этими условиями, они будут рассмотрены более подробно в
последующих задачах. Также обратите внимание, что класс Kitten имеет constructor
определенный внутри него, который вызывает super() . Он использует super() для вызова
конструктора родительского класса, в данном случае React.Component . Конструктор - это специальный метод,
используемый при инициализации объектов, созданных с ключевым словом class . Это лучшая практика для
индивидуального вызова компонента constructor с super , и передать props для
обоих. Это гарантирует правильность инициализации компонента. Пока что знайте, что это стандарт для включения этого
кода. Вскоре вы увидите другие варианты использования конструктора, а также props .
Замечание: Хоть здесь и сказано "Пока что знайте, что это стандарт для включения этого кода", все же в таком виде данный конструктор не имеет никакого смысла, ведь в нем просто происходит вызов родительского конструктора. Здесь нет никакой дополнительной логики. Более того, в эслинте есть отдельное правило, которое может ругаться на такой вызов, советуя убрать его вовсе. Тем не менее, в дальнейшем вы увидите примеры, где часть логики задается именно в конструкторе. А вот функция render - обязательная. Всякий реакт-компонент должен что-то возвращать, и делает он это именно в методе render.
MyComponent определен в редакторе кода с использованием синтаксиса класса. Завершите запись метода render чтобы он возвращал элемент div, содержащий h1 с текстом Hello React! ,