Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

Для создания компонентов React не обязательно использовать классы. В тех случаях, когда у компонента нет состояния, гораздо проще использовать альтернативный способ.

See the Pen js_react_functional_components by Hexlet (@hexlet) on CodePen.

Компоненты, созданные как функции, называются функциональными. Они принимают объект со свойствами как первый аргумент, и также начинаются с большой буквы.

На вопрос "когда их стоит использовать?" ответ очень простой. Всегда, когда компонент не хранит в себе состояние. Другими словами, большинство компонентов в проекте должно быть именно функциональными.

В остальном они ведут себя точно так же, как и компоненты на классах.

Пространства имён

Вспомним пример из прошлого урока, связанный с использованием компонентов-потомков, созданных специально для родительского компонента.

<Card>
  <CardTitle>Title</CardTitle>
  <CardBody>
    <b>Body</b>
  </CardBody>
</Card>

Следуя сказанному выше, компоненты <CardTitle> и <CardBody> должны быть реализованы как функциональные.

Но это ещё не всё, можно пойти дальше и реализовать такую структуру:

import Card from './Card.jsx';

<Card>
  <Card.Body>
    <Card.Title>Title</Card.Title>
  </Card.Body>
</Card>

JSX поддерживает механизм пространств имён. Не сказать, что без него нельзя жить, но он довольно удобен. Во-первых, достаточно импортировать только компонент верхнего уровня, а остальное доступно уже через него, что довольно логично, если смотреть на JSX как на JS-код. Во-вторых, так лучше задаётся семантика.

Реализуется подобный механизм через статические свойства.

See the Pen js_react_functional_components_namespaces by Hexlet (@hexlet) on CodePen.

Такой способ компоновки не требует того, чтобы все компоненты были созданы в одном файле. Структура может быть любой, для остального есть импорты.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».