#8: 🍕 React Pizza v2 — Настраиваем адаптивную вёрстку, создаём страницу корзины

React Pizza V2 — Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.

❤️ Поддержка:

📝 Полный стек:
- ReactJS 18
- TypeScript
- Redux Toolkit (хранение данных / пицц)
- React Router v6 (навигация)
- Axios + Fetch (отправка запроса на бэкенд)
- React Hooks (хуки)
- Prettier (форматирование кода)
- CSS-Modules / SCSS (стилизация)
- React Content Loader (скелетон)
- React Pagination (пагинация)
- Lodash.Debounce
- Code Splitting, React Loadable, useWhyDidYouUpdate

Таймкоды: еще не готовы

🔗 Следите за обновлениями и информацией в:

[Диман-еш]

адаптация сетки 1 строчкой без медиа: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

[Shved_.]

0:00 План на урок
1:00 Фиксим верстку PizzaBlock
12:07 Фиксим верстку Categories, Sort
25:44 Фиксим верстку Header
35:35 Фиксим верстку Корзина
42:55 Планы на следующий урок

[serhiikhotsyk]

7:40 если кто-то захочет выровнять элемент pizza-block по центру, просто задайте его родителю, который является Grid контейнером, свойство justify-items: center; (не путать с justify-content - для флексов) - выровняет по центру элемент по горизонтали, aling-items: center; - выровняет по вертикали, если нужно, но обычно идет значение start.

[Человек-рц]

В этой серии Дэн мучается от перфекционизма в css))

[Evgeny..]

Спасибо за курс. Столько труда))
Эх был бы этот курс года полтора назад))

[ИгорьМалежик-ез]

Не сразу понял где искать корзину и долго ее искал, оказалось что она копировалась из папки public Карт html.

[mr.zxzxzxz]

может кому то понравится такой простой стиль, медиа запросы не нужны
&__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px 20px;
justify-items: center;
}

[madbad]

"Восемьдисять" - это в какой области такое милое произношение )))

[МихаилЖаравин-мы]

Чтобы родитель не создавать, можно же было justify-items: center; сделать в items

[iamboikodmytro]

Я верстал весь макет от начала сам, так как использовал метод mobile first. То есть шел от мобильного разрешения к десктопу. И сразу применяя модульный css. Как по мне намного удобнее)

[gvegasss]

8:15 если написать:

&__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
column-gap: 1rem;
}
(Спасибо автору коммента ниже за совет)

то можно использовать просто:
.pizza-block {
...
margin: 0 auto;
...
}

Автору канала большой рахмед за контент! 🤝

[diggerdog]

19:20 я написал ul flex-wrap и потом ему же justify-content: center и красиво стало. Попробуйте так же

[anyryze]

Более универсальный костыль под ситуацию с корзиной и гридом. Напрямую в свойствах родительского элемента в котором находятся предметы, обратиться к блоку content-items и вызвать параметр all:unset. И он будет девственно чист и по-умолчанию там будет стоять уже display:block

[es]

Ассаламу 1алайкум варахьматуЛлах1.

Ваша, даггар Дел рез хийл хьун ал луар дар хоьг!
Хьо бахьан хил бокх пайд хила тхун окх урокшах. Дала диканц бекхам бойла хьуна! Садакъат уль-джария хуьлийл хьун ахь даржош дол 1илман.

Ларамца Хьа Бусулба Вежарий!

[МихаилСабуров-ыв]

Может кому будет полезно, то проще все выровнять без всяких медиа
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-column-gap: 11px;
justify-items: center;

[назарніколаєвич]

Курс отличный. И про лайки лучше напоминай)), а то уж больно все интересно, не успеешь оглянуться как уже несколько видео просмотрел.

[CorleoneMikele]

Спасибо за курс, есть небольшое пожелание для следующих курсов, не мог бы ты в видео использовать какую -нибудь другую тему оформления для вс кода, на текущей не видна активная вкладка редактора, а так как ты часто очень быстро переключаешься между ними это немного мешает сосредотачиваться на том что ты рассказываешь и приходится напрягаться и искать на какой ты вкладке находишься (это можно сделать по хлебным крошкам кода текущей вкладки). А так курс отличный, подписался из за него на бусти, смотрю уже 12

[МаксимСоловьев-сн]

26:57 можно уменьшить 'H1' и 'P' у лого и паддинги у кнопки

[Abdul-hycy]

3:10 вот это у тебя глаз-алмаз, 20px лишних справа заметить. Хотя обратив внимание, я теперь тоже это замечаю

[пиупиу-рд]

Созрел вопрос)
после перехода из корзины по кнопке "назад" у нас происходит перерендер т.к. фунция с fetch находится на уровне страницы Home
будет ли правильнее в этом случае поднять функцию на уровень App?