Значки и разделы

Книга работает, а теперь она поможет выбирать. Значки покажут, какие рецепты вегетарианские, а какие быстрые, а разделы отделят супы от основных блюд. А десерты? Их пока нет, и книга должна об этом сказать.

Значки. Вегетарианский рецепт получает значок Вегетарианский, а рецепт, который готовится меньше 20 минут, — значок Быстрый. Каждый значок — это span с классом badge, в карточке под названием. У рецепта могут быть оба значка, один из них или ни одного.

Разделы. В книге три раздела: Супы (рецепты, у которых course равен "soup"), Основные блюда ("main") и Десерты ("dessert"). Каждый раздел — это section с названием в h2, под которым стоят карточки его рецептов в порядке массива. В разделе без рецептов под названием написано Рецептов пока нет.

Три одинаковых по виду раздела — работа для компонента: для него есть новый пустой файл Chapter.jsx. Название раздела и его рецепты можно передать ему в пропсах, а App может отфильтровать рецепты для каждого раздела.

Совет: для каждого условия подумайте, что оно даёт. recipe.vegetarian — это true или false. А чему равна длина пустого массива и что React показывает для этого значения?

Вот и весь проект. Ваша книга рецептов собирается из данных: добавьте рецепт в recipes.js, например десерт, и он появится в нужном разделе с нужными значками, а ни один компонент менять не придётся. Так работают приложения на React: компоненты описывают, как показывать данные, а страница следует за данными. Правда, пока страница открыта, данные никогда не меняются. В следующем уроке, «События», ваши компоненты начнут реагировать на пользователя: на щелчки и на ввод.