#11: 🍕 React Pizza v2 - Что такое контекст в React (useContext) и Props Drilling?
HTML-код
- Опубликовано: 24 май 2022
- React Pizza V2 - Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.
Более подробней тут: www.notion.so/React-Pizza-v2-...
Исходники доступны в Boosty или в моём Telegram-канале: t.me/archakov_im
❤️ Поддержка:
- Boosty (исходники, макеты): boosty.to/archakov_blog
- Донаты: www.donationalerts.com/r/arch...
Старый курс React Pizza - • #1: React Pizza - разр...
👀 Демо: react-pizza-v2.vercel.app/
📝 Полный стек:
- 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
Ссылка на исходник: github.com/Archakov06/react-p...
Ссылка на вёрстку: github.com/Archakov06/react-p...
Ссылка на дизайн: www.figma.com/file/wWUnQwvRDW...
Таймкоды: еще не готовы
📢 Платный курс по ReactJS с наставником: mentor.archakov.im/landing.html
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
Кейсы использования Context: Dark Mode и мультиязычность.
Огромное спасибо, я мучался до вас с юзКонтекстом полтора часа чистого времени, спросил у друга, он скинул ваше видео, вы помогли
Очень подробно и понятно, главное отточить на практике!
Супер! Отличная подача!
Спасибо Денис, сегодня наконец-то хоть что-то поняла о useContext. Благодарю!
четко спасибо, ещё бы createselector и авторизацию хотябы простенькую без рефрэш токена... и обработку ошибок
Спасибо большое 😊
просто имба. Не понял useContext на react sneakers, зато здесь понял сразу и полностью. Спасибо тебе большое! Продолжай в том же духе!
ждем следующие части
хорошо объяснил всё!
Спасибо огромное
Спасибо, очень доходчиво
Благодарю вас, помогли
мужик все очень круто! i continue watching!
Тхэнк ю вери матч!
Отличный урок про Реакт Контекст
Жаль что только одно видео вышло за день (
Спасибо
На boosty не подписан, но сижу всегда с VPN и перехожу на сайты рекламодателей. Спасибо за контент.
фигасе. Я когда редакс изучал все никак не мог понять его логику, все в голове не укладывалось что оно и как оно работает?. А тут на примере юзконтекста я понял и логику редакса)) Все так просто и доходчиво обяснил блин спасибо чел) Щас попробую это все переварить еще раз поэкспериментирвать чтоб прям крепко в голове сел, и затем начну изучать редакс
КрасавчЕГ, бро!
Контекст крутой! Прям просто и по красоте. Даже странно, что раньше его не использовал.
2 видоса в день бы
лаконично)
У меня кстати поиск нормально работает, я его поставил первым аргументом после "?" и все нормально заработало
у меня такое чувство что больше мне не придется идти на занятия в техникум после твоих уроков я тебя смотрю в израиле ты просто крут нет даже сомнений!!!!
Как дела в Израиле?
9:33 Аахахахахахахах. Это пять! :)
Дэн, было бы удобно, если на каждый урок был бы пуш. Чтобы возвращаясь к твоим видео выборочно, можно было бы глазами по коду пробежаться и освежить нужные знания
Согласен. В следующий раз учту этот момент
я хз нужно тебе ещё коммиты на все уроки но ,я для себя сделал на гит выкладываю если хочешь или кто то хочет могу дать доступ будете чекать ,токо надо разобраться как ограничить push commit чтоб не забежали ребзя с криками сейчас мы тут тебе почистим.;)
Как бы Вы помогли мне сейчас!! Поделитесь коммитами?@@Ingvar1133
@@Ingvar1133 Привет. Можешь сюда кинуть? Я думаю, многим будет интересно)
в видео № 11
Не хватает объяснения что произойдет если mockapi вернет 404 из за не корректного поиска
+ обработка этого случая
+ как то не правильно он обрабатывает английскую раскладку
такая проблема что после добавления контекста не рендариться вообще страница приложения а только фон в терминале нет ошибок а в инструментах разработчика даже запрос не выдает, кто знает в чем может быть проблема?
Нашел, это из за моей невнимательности сказали что useContext это как хук и я написал его как хук вместо таких скобок { } передал [ ]
странно делаю все также у меня ошибка что в useContext андефаинд может кто подскажет в чём может быть проблема
Сами разработчики реакта согласно документации говорят что лучше его не использовать, так как это усложняет повторное использование компонентов. Возможно автор хотел просто показать что такое есть, но как по мне я очень редко сам использую контекст
а что тогда?
@@artemkatr9483 redux, mobX, или же local state, либо пропсдриллинг как говорится
Если ты реально работаешь разработчиком без понимания того, что для того чтобы изучить стейт контейнеры, сначала нужно изучить базу и понять, как это работает, то ты далеко в этом деле не уедешь, увы.
@@Icy_Kit Ты это не туда написал
Люблю, когда мусолят вокруг да около, а то некоторые тарабанят, что потом непонятно - то ли документацию читал то ли chatGPT сценарий написал
а как сделать, так чтобы useState передавалcя от ребенка к родителю. в этом случае от Search в App.js
Привет, можете скинуть ваше json settings с vs code
В описании к видео есть вся инфа
Ден, скажи, пожалуйста, сколько всего получилось видео?
+-30
src\components\Header.jsx 'searchValue' is not defined И 'setSearchValue' is not defined.
Помогает, если добавить в header useContext тоже...
const { searchValue, setSearchValue } = useContext(SearchContext);
10:00
Почему у тебя на табнейле везде тайпскритп но ты
пишешь приложение на джаваскрипте?
потому что ТС будет дальше по курсу, лол
на mockapi проблема с поиком на самом деле, там поиск по всем полям, и это трабл
на самом деле нет, ты можешь указывать в параметрах в каком поле ты ищешь. Да там есть возможность сделать поиск по всем полям, передав параметр filter или search, но 3 вариант поиска это по конкретному полю. Если кратко, то так: &title=${searchValue}
Подскажи пожалуйста, почему не работают категории пицц после запуска уже целого исходника? И не корректно работает переход между страницами.
@@the.tymoshchuk да все верно или этот знак вставить в сам запрос
Ребят, скиньте пожалуйста готовый код первых 10 уроков, я работаю и нет возможности проходить весь курс ((
Тип "{ serchValue: string; setSerchValue: React.Dispatch; }" не может быть назначен для типа "string", но все работает корректно . может кто-то знает как решить ?
createContext({}) - можно так
@@chirkov yt hf,jnftn
гне работает
да авторизацию б еще)
A Č I [Ū]
Несравнимый Арчаков!!!!!
Спасибо