- Видео 95
- Просмотров 447 215
Let's Code
Россия
Добавлен 26 янв 2018
⭐️ Сайт
› letscode-dev.github.io
⭐️ RUclips
› ruclips.net/user/letscode-dev
⭐️ GitHub
› github.com/letscode-dev
⭐️ Методичка
› letscode-dev.github.io/workbook
⭐️ Codepen
› codepen.io/letscode-dev
🔰 Telegram Channel
› t.me/letscode_channel
🔰 Telegram Chat
› t.me/letscode_chat
🍕 Донаты
› yoomoney.ru/to/410011498839870
› letscode-dev.github.io
⭐️ RUclips
› ruclips.net/user/letscode-dev
⭐️ GitHub
› github.com/letscode-dev
⭐️ Методичка
› letscode-dev.github.io/workbook
⭐️ Codepen
› codepen.io/letscode-dev
🔰 Telegram Channel
› t.me/letscode_channel
🔰 Telegram Chat
› t.me/letscode_chat
🍕 Донаты
› yoomoney.ru/to/410011498839870
Курс React и Redux Toolkit. 07. Заключение
⭐️ Сайт школы
› letscode-dev.github.io/
⭐️ Ссылка на проект
› letscode-dev.github.io/react-arrow-game
⭐️ Ссылка на репозиторий проекта
› github.com/letscode-dev/react-arrow-game
⭐️ Ссылка на курс
› ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE
› letscode-dev.github.io/
⭐️ Ссылка на проект
› letscode-dev.github.io/react-arrow-game
⭐️ Ссылка на репозиторий проекта
› github.com/letscode-dev/react-arrow-game
⭐️ Ссылка на курс
› ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE
Просмотров: 579
Видео
Курс React и Redux Toolkit. 06. Деплой на GitHub Pages
Просмотров 525Год назад
🔥 Ссылка на ветку текущего урока › github.com/letscode-dev/react-arrow-game/tree/6-github-pages ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE ⭐️ Используемые ресурсы › pages.github.com/ GitHub Pages › docs.github.com/en/pages/quickstart...
Курс React и Redux Toolkit. 05. Написание тестов на Vitest
Просмотров 1,1 тыс.Год назад
🔥 Ссылка на ветку текущего урока › github.com/letscode-dev/react-arrow-game/tree/5-vitest ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE ⭐️ Используемые ресурсы › vitest.dev/ Vitest 🚀 Таймкоды 00:00 - Вступление 00:40 - initialState 09:1...
Курс React и Redux Toolkit. 04. Подключение Material-UI и создание UI-Kit
Просмотров 1,4 тыс.Год назад
🔥 Ссылка на ветку текущего урока › github.com/letscode-dev/react-arrow-game/tree/4-material-ui ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE ⭐️ Используемые ресурсы › mui.com/ Material-UI › mui.com/material-ui/getting-started/installati...
Курс React и Redux Toolkit. 03. Бизнес логика на Redux Toolkit. createSlice и reducers
Просмотров 3,2 тыс.Год назад
🔥 Ссылка на ветку текущего урока › github.com/letscode-dev/react-arrow-game/tree/3-redux-toolkit ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE ⭐️ Используемые ресурсы › ruclips.net/video/fHx5EQZUz5k/видео.html Видео по React Redux › get...
Курс React и Redux Toolkit. 02. Настройка проекта. Vite, ESLint, Prettier, Husky pre-commit
Просмотров 4,7 тыс.Год назад
🔥 Ссылка на ветку текущего урока › github.com/letscode-dev/react-arrow-game/tree/2-create-react-redux-app ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE ⭐️ Используемые ресурсы › redux-toolkit.js.org/introduction/getting-started#create-a...
Курс React и Redux Toolkit. 01. Обзор курса
Просмотров 4,1 тыс.Год назад
⭐️ Сайт школы › letscode-dev.github.io/ ⭐️ Ссылка на проект › letscode-dev.github.io/react-arrow-game ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-arrow-game ⭐️ Ссылка на курс › ruclips.net/p/PL7cTIfGFrdKmWvaZph1HnoWIcVabcowzE 🚀 Таймкоды 00:00 - Общая информация 01:01 - Обзор приложения 03:07 - Используемые технологии
Курс Git и GitHub. 08. Перемещение веток (rebase). Merge vs Rebase
Просмотров 488Год назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Тема в справочнике › letscode-dev.github.io/workbook/themes/learn/git 🚀 Таймкоды 00:00 - Подготовка 03:35 - git rebase 05:52 - Подготовка 08:12 - Флаг continue 11:04 - Флаг skip 13:42 - Флаг abort 17:00 - Интерактивный rebase 32:53 - Алгоритм работы rebase 36:20 - Отличие merge от rebase
Курс Git и GitHub. 07. Слияние веток (merge)
Просмотров 1,1 тыс.Год назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Тема в справочнике › letscode-dev.github.io/workbook/themes/learn/git 🚀 Таймкоды 00:00 - Алгоритм работы 03:20 - Команда git merge 10:07 - Флаги abort и continue 16:09 - Флаг squash 29:09 - Актуализация рабочей ветки
Курс Git и GitHub. 06. Работа с ветками: branch / checkout / cherry-pick / stash
Просмотров 2 тыс.2 года назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Справочник по Git и GitHub › letscode-dev.github.io/workbook/themes/learn/git 🚀 Таймкоды 00:00 - Введение про ветки 10:31- git branch 31:10 - git cherry-pick 36:16 - git stash
Курс Git и GitHub. 05. Клонирование репозитория с GitHub: clone / pull / fetch
Просмотров 17 тыс.2 года назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Справочник по Git и GitHub › letscode-dev.github.io/workbook/themes/learn/git 🚀 Таймкоды 00:00 - Создание репозитория на GitHub 01:35 - git clone 03:04 - Работа с репозиторием 08:09 - git fetch 09:20 - git pull
Курс React и Redux. 02. Файл CHANGELOG.md. Доработки курса
Просмотров 5 тыс.2 года назад
🔥 Файл CHANGELOG.md › github.com/letscode-dev/react-star-wars/blob/master/CHANGELOG.md ⭐️ Ссылка на проект › letscode-dev.github.io/react-star-wars/ ⭐️ Ссылка на репозиторий проекта › github.com/letscode-dev/react-star-wars ⭐️ Курс React / Redux-практика › ruclips.net/p/PL7cTIfGFrdKkQAWKDu2NdFt5Cx38B-A3i
Курс Git и GitHub. 04. Загрузка репозитория на GitHub: push / remote / config
Просмотров 2,7 тыс.2 года назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Справочник по Git и GitHub › letscode-dev.github.io/workbook/themes/learn/git 🚀 Таймкоды 00:00 - Подготовка 02:32 - git config 07:04 - git remote 10:20 - git push
Курс Git и GitHub. 03. Создание репозитория и сохранение изменений: init / status / add / commit
Просмотров 3,1 тыс.2 года назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Справочник по Git и GitHub › letscode-dev.github.io/workbook/themes/learn/git ⭐️ Используемые ресурсы › git-scm.com/ › code.visualstudio.com/ › git-scm.com/docs 🚀 Таймкоды 00:00 - Установка Git и инструментов 04:20 - Виды терминалов 06:20 - git init 08:16 - git status 11:07 - git add 13:02 - git commit 22:35 - Отмена изм...
Курс Git и GitHub. 02. Что такое Git / GitHub и какие задачи решает
Просмотров 1,9 тыс.2 года назад
⭐️ Курс Git и GitHub › ruclips.net/p/PL7cTIfGFrdKnPyWTcz_GEQo5drpr_1UH2 ⭐️ Справочник по Git и GitHub › letscode-dev.github.io/workbook/themes/learn/git
Курс React и Redux. 23. Завершение курса
Просмотров 1,8 тыс.3 года назад
Курс React и Redux. 23. Завершение курса
Курс React и Redux. 22. Деплой приложения на GitHub Pages (библиотека gh-pages)
Просмотров 2,7 тыс.3 года назад
Курс React и Redux. 22. Деплой приложения на GitHub Pages (библиотека gh-pages)
Курс React и Redux. 21. Компонент по отображению видео. Стилизация скроллбара
Просмотров 1,9 тыс.3 года назад
Курс React и Redux. 21. Компонент по отображению видео. Стилизация скроллбара
Курс React и Redux. 20. Мемоизация. Хук useCallback(). Lodash Debounce. Компонент "Поиск"
Просмотров 3 тыс.3 года назад
Курс React и Redux. 20. Мемоизация. Хук useCallback(). Lodash Debounce. Компонент "Поиск"
Курс React и Redux. 19. React Context API. useContext(). Смена темы приложения
Просмотров 3,7 тыс.3 года назад
Курс React и Redux. 19. React Context API. useContext(). Смена темы приложения
Курс React и Redux. 18. React Redux. Redux Devtools. Компонент "Избранное"
Просмотров 5 тыс.3 года назад
Курс React и Redux. 18. React Redux. Redux Devtools. Компонент "Избранное"
React Redux. Архитектура. Хуки useDispatch(), useSelector()
Просмотров 4,3 тыс.3 года назад
React Redux. Архитектура. Хуки useDispatch(), useSelector()
Курс React и Redux. 16. React.lazy(). Запросы через Promise.all(). Список фильмов
Просмотров 2,9 тыс.3 года назад
Курс React и Redux. 16. React.lazy(). Запросы через Promise.all(). Список фильмов
Курс React и Redux. 15. Роутинг. Хук useHistory(). Ссылка "Назад"
Просмотров 2,7 тыс.3 года назад
Курс React и Redux. 15. Роутинг. Хук useHistory(). Ссылка "Назад"
Курс React и Redux. 14. Роутинг. URL Parameters. Компонент "Информация по персонажам"
Просмотров 3,4 тыс.3 года назад
Курс React и Redux. 14. Роутинг. URL Parameters. Компонент "Информация по персонажам"
Курс React и Redux. 13. Создание Ui-Kit и настройка StoryBook. Компонент "Кнопка"
Просмотров 6 тыс.3 года назад
Курс React и Redux. 13. Создание Ui-Kit и настройка StoryBook. Компонент "Кнопка"
Курс React и Redux. 12. Роутинг. Обработка Query Parameters. Навигация по персонажам
Просмотров 4,6 тыс.3 года назад
Курс React и Redux. 12. Роутинг. Обработка Query Parameters. Навигация по персонажам
Курс React и Redux. 11. Роутинг. Обработка ошибки 404. Хук useLocation()
Просмотров 4,3 тыс.3 года назад
Курс React и Redux. 11. Роутинг. Обработка ошибки 404. Хук useLocation()
Курс React и Redux. 10. Базовый роутинг с react-router. Стилизация приложения
Просмотров 4,5 тыс.3 года назад
Курс React и Redux. 10. Базовый роутинг с react-router. Стилизация приложения
а если первый и последний нужно , то есть first and last.. как прописать?
Два селектора будет. К примеру, нужно добавит к элементу с классом .item .item:first-child { стили для первого элемента } .item:last-child { стили для последнего элемента }
Cупер приятный чел, отличные уроки. Спасибо!
Здравствуйте! Прошу дать ссылку на итоговый код
Здравствуйте! Не могу найти ссылку на ваш код, с той структурой, что вы показывали на уроке
Если кому-то нужно будет еще решение нужно просто переименовать файл Comics.css на Comics.module.css
Здравствуйте. А ссылка на тестовый JSON для запросов уже не актуальна?
Поменял ссылку на актуальную
Класс! подписался, делайте еще уроки!
Класс! подписался, делайте еще уроки!
Класс! подписался, делайте еще уроки!
Класс! подписался, делайте еще уроки!
Класс! подписался, делайте еще уроки!
Класс! подписался, делайте еще уроки!
Объясните пожалуйста почему вы создаёте вместе с компонентом файл index.ts и там импортируете по дефолту, если в самом компоненте уже это написано?
Если в директории есть файл index.ts, то он импортируется по-умолчанию. К примеру, компонент называется "App" и находится в директории "App". Если нет файла index.ts, то нужно указывать полный путь к файлу: "App/App.tsx". Если есть файл index.ts, то достаточно указать "App". Есть еще практика, сам файл с компонентов называть index.tsx, но мне так не нравится - можно запутаться, если окрыты несолько файлов с копонентами
@@LetsCodeDev спасибо за объяснение
Странно, что еще не популярно. Качественно 👍
было бы неплохо объяснения действий, что и для чего делается. А по факту идет просто озвучивание действий. Например: мы создаем редьюсер, пишет туда этот код. Дальше мы создаем другой файл. и т.д а какой функционал у каждого элемента, для чего он нужен... да нафиг это объяснять)
7:30, Вы указали base, который буде подставляться при build, но как такое сделать если я писал через createReactApp а не с помощью Vite?
Посмотри в моем другом курсе по React. Там как раз используется CreateReactApp ruclips.net/video/fNlKABybMls/видео.html Если в 2х словах, то тебе нужно в файле package.json указать homepage {"homepage": "account-name.github.io/project-name/",} Не адрес репозитория, а именно адрес по которому доступно твое задеплоенное приложение
как же мало просмотров на таком качественном ролике. Привет из 2024. Ваши труды все еще актуальны и востребованы. Низкий поклон Вам за ваше творчество.
Спасибо! Приятно!
На правах ученика спрошу.. если в локальном хранилище хранить имя и цену, и их же потом выводить на лист товаров в корзине, код будет проще? Отбросив при этом всякие временные лаги изменения цен, изменение названий, количество на остатке..
Можно так то. Но в реальном приложении это все хранится в БД на бэкенде
@@LetsCodeDev да я это понимаю, на том же озоне кладёшь товары в корзину, а когда оформляешь цена может вырасти )
1:44:48 На 41 строке все нашли пасхалку?)
Даже я не нашёл пасхалку)) делись))
@@LetsCodeDev ===3 на писюн похоже xD
Привет! Когда новые курсы? Ты очень хорошо обьясняешь я бы сказал, и вот как идея: по нексту запили плс)
(Я щас второй урок досмотрел)
Привет! Спасибо! Да, по Нексту есть в планах сделать, но попозже. Я сейчас готовлю большие платные курсы
@@LetsCodeDev Но поясняешь ты действительно очень хорошо
В бизнес логики присутствует баг: на кнопки стрелок можно нажимать несколько раз. Пользователь 3 раза быстро вводит правильный(или неправильный) ответ и выигрывает(или проигрывает) за одну итерацию. Это пофикшено в ветке main. Можете ориентироваться на нее github.com/letscode-dev/react-arrow-game/blob/main/src/components/Playground/store/slices.ts#L32 Необходимо поправить "setEnteredValue" как в main
Спасибо за курс! Подскажите пожалуйста, какой функционал у нас отвечает за то, чтобы за один шаг пользователь мог нажать на кнопку только 1 раз? Я реализую сейчас ваш код по уроку, где-то ошиблась наверное и не могу найти ошибку. Получается, что на первой итерации стрелка появляется, пользователь 3 раза быстро вводит правильный(или неправильный) ответ и выигрывает(или проигрывает) за одну итерацию. За первый шаг быстрым тройным нажатием я получаю totalSuccessful:3 и выигрываю/проигрываю.
Привет! И правда! В этом видео еще нет такой проверки. Видно, я это заметил уже дальше и поправил. В любой непонятной ситуации, сравнивай свой код с финальной веткой main - там с большей вероятностью пофикшены все бага github.com/letscode-dev/react-arrow-game/blob/main/src/components/Playground/store/slices.ts#L32 Там проблема в "src\components\Playground\store\slices.ts" в "setEnteredValue" Нужно так написать if (step.enteredValue === null) { state.steps[state.currentStep - 1] = { ...step, enteredValue: action.payload, success: isSuccess, } if (isSuccess) { state.totalSuccessful += 1 } else { state.totalUnsuccessful += 1 state.totalSuccessful = 0 } }
@@LetsCodeDev получилось, спасибо)
в целом концепция понятна, НО. Мы ведь можем создать просто компонент, в него как свойства children передать другие компоненты (сделать обертку над ними и использовать их как children) и дальше использовать наш новый компонент, зачем тогда HOC ? Это просто еще один удобный способ, или есть что то более глобальное?
Глобального нет. Просто один из способов. Я думаю "просто компонент, в него как свойства children передать другие компоненты" даже удобнее будет. В Реакте есть много вещей, которые по-началу многие стали использовать, а сейчас почти не используется: те же HOC или Render Props. На момент записи курса мы активно использовали HOC
спасибо!
Учиться у тебя и практиковать с тобой это одно удовольствие. Говоришь не медленно и не быстро, а так как нужно. Хочу сказать тебе спасибо! Жму тебе руку
огромное спасибо за труды !!
все идеально прописано и обьясняется
thanks a lot!
видео урок бомбезный , спасибо за огромный труд !
husky не работает :(
Скачал итоговый проект, развернуть не получилось после npm i вылезла куча ошибок
Вот дела, сайт Swapi не работает и запросы к нему так же, потому что небезопасное подключение.. Но вчера всё работало нормально, возможно всё заработает в скором времени, надеюсь..
всё очень круто! огромное спасибо! но сегодня сайт swapi стал незащищенным, а http он не поддерживает... Это всё? курс потерял актуальность? строить свою похожую бд единственный выход?
для того что бы четко видеть loader, в хроме в инструментах разработчика в разделе network можно выбрать Slow 3G
32:56 - подскажите пожалуйста почему у меня NodeJS.Timeout ругает TS. Гуглил и не смог найти ответа.
Привет, хотел спросить, а в 2024 году этот курс актуален?)
Базово ничего не поменялось. По большей части, изменилось только API для react-router, но я его уже обновил и в проекте он актуальный. Курс можно использовать для обучения
Когда поставил картинку звезд, подумал экран сломался что-ли. Там какие-то пятна на картинке😂
Вопрос. С помощью пропса classes мы ни как не сможем переназначить например color ? т.к. у модуля будет специфичность всегда выше. Только через !important похоже.
спасибо что вы есть
26:53 по БЭМ названия БЛОК__ЭЛЕМЕНТ, т.е. тут className={styles.container__list} а не наоборот. Автор спасибо за контент!
да, точно!
Большое спасибо за курс! Переписал все на TypeScript, очень хорошо прокачался.
А почему используете такую старую версию husky? Щас не работает этот метод установки...
Спасибо большое за уроки
Спасибо за видео!
все удалил ничего не работает в смысле папку из проекта features и сервер упал((((
Благодарю
Спасибо за курс !
Спасибо за урок! Очень подробно и информативно, успехов в дальнейшем 🙏
Fetch запрос ужасен. Он ведь возвращает Promise, ну так делаем каждое действие в then. Но ведь нет, сначала render вместе с CATALOG. А когда спиннер еще туда перед рендером, это полный предел. Для спиннера использовать нужно finally, это вообще классика прелоадинга. fetch('./server/catalog.json') .then((res) => res.json()) .then((body) => { CATALOG = body; }) .then(() => { render(); }) .catch((error) => { console.log(error); }) .finally(() => { spinnerPage.handleClear(); });
Я понимаю как, но не понимаю зачем... Когда я увидел этот плейлист, такой, ну ок, я могу это сделать. Но как только я сел и начал писать первую функцию, я услышал в начале: 'Создаем класс'. И я такой В смысле? Ну с классами разобрался я более менее, Но Объясни зачем писать на классах , если можно написать тоже с помощью функций? Этот плейлист для чисто для практики классов, или у классов есть какое то преимущество перед теми же функциями? ....сейчас сижу ещё раз пересматриваю плейлист, классы для меня новое....
"у классов есть какое то преимущество перед теми же функциями" - филосовсикие вопросы задаёшь)) это вечный спорт ООП или ФП (функциональное программирование). Раньше ООП было супер популярно, когда начинал писать на React, были еще классы. Сейчас ФП топ и в React хуки. Через какое-то время может опять к ООП вернемся. Конечно, тут можно всё на функциях сделать, но курс на практику работы с классами - это тоже надо уметь