Итоги

В этом уроке вы узнали, что:

• Пропсы передают данные от родителя компоненту. Они записываются как атрибуты, <BandCard name="Ночные поезда" stage="Главная сцена" />, а React передаёт их компоненту одним объектом, props.
• Компоненты деструктурируют пропсы в параметрах: function BandCard({ name, stage }). Названия должны совпадать точно. Проп, который никто не передал, равен undefined, и React ничего для него не показывает.
• Текст пишется в кавычках, любое другое значение — в фигурных скобках: likes={128}, headliner={true} или просто headliner для true. Перед return компонент может выполнять любой JavaScript, например if, выбирающий класс.
• Проп может быть объектом, band={bands[0]}, который читается как band.name, или массивом, days={["Пятница", "Суббота"]}.
• Значение по умолчанию заменяет отсутствующий проп: { stage = "Сцена уточняется" }. Оно используется только тогда, когда проп равен undefined.
• То, что находится между тегами компонента, — это проп children: <Card>…</Card> может обернуть любое содержимое.
• Пропсы только для чтения. Решает родитель, а компонент никогда не меняет свои пропсы; значение, полученное из них, записывается в новую переменную.

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

А пока немного практики: объявления для гостей фестиваля. Файл Notice.jsx пуст, и компонент вы напишете сами.