Бесплатный конспект к уроку

В видео Валера, преподаватель Айти-Инкубатора, рассказал про 4 темы:

6. Работа с изображениями. Загрузка изображений, FormData, react-toastify

• Загрузка дефолтной картинки

• FormData- теория и практика

• input type="file"

• Реализация загрузки изображения

• Ограничение загрузки по типу файла

• Ограничение загрузки по размеру

• Реализация удаления изображения

• Рефакторинг / декомпозиция кода

• Внедрение React toastify для отображения ошибок
  
  7. Searching and Pagination. Query параметры, debounce
   

• Работа с query параметрами

• Реализация поиска

• Debounce - теория, реализация и пояснение кода

• Пагинация - теория, реализация и пояснение кода

• Добавление селекта для выбора размера страницы (pageSize)

• Рефакторинг / декомпозиция кода
  
  8. Cache. Методы для работы с кэшем. Получение данных на другой странице
   

• Кэширование теория

• KeepUnusedDataFor

• RefetchOnFocus

• RefetchOnReconnec

• Polling

• Получение данных на другой странице
  
  9. Infinity Queries. flat, flatMap, load more, IntersectionObserver, курсорная пагинация
  

• Infinity Queries - теория

• Курсорная пагинация - теория и реализация

• Реализация пагинации при отрисовке треков.

• Методы массивов flat и flatMap на практике

• Реализация подгрузки данных по кнопке (load more)

• Infinity scroll - теория

• Использование Intersection observer для реализации бесконечной подгрузки данных

• Декомпозиция. Вынесение логики в кастомный хук useInfiniteScroll

• Домашнее задание: Offset Pagination

Конспект урока здесь, а если что не получается, пишите сюда, поможем.

То же видео, только на ютубе

На следующей неделе размещу ролик, зачем вам NodeJS, если вы учите React?

Надеемся, что мы не оплошаем, но пока функционал очень нравится. Есть куда расти и развиваться.

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

Ссылка платформу с конспектом. (это бесплатно!). Кому удобнее смотреть на ютубе, велком сюда

В видео Валера, преподаватель Айти-Инкубатора, рассказал про 5 тем:

Введение в курс RTK Query:

• Что будет в курсе и зачем RTK Query разработчику  

• Краткий обзор программы

Обзор платформы и материалов курса  

• Структура обучения  

• Где найти конспекты и документацию  

• Дополнительные материалы (репозиторий, примеры кода)

Создание и базовая настройка приложения  

• Создание нового проекта (Vite + React + TypeScript)

• Установка зависимостей и подключение Redux Toolkit  

• Очистка шаблонного кода  

• Структура проекта (feature folders, pages, components)

• Настройка алиасов и импортов  

• Подключение роутинга (React Router)

• RTK Query: теория и первые запросы  

Что такое RTK Query и чем отличается от Redux Toolkit

• Query vs Mutation: базовые концепции

• Настройка API slice

• Первый запрос (fetch playlists)

• Типизация запросов и данных из бэкенда  

• Использование хуков useQuery в React

• Отображение данных в интерфейсе

Mutation и CRUD операции  

• Введение в мутации (создание, обновление, удаление)

• Настройка useMutation

• Создание плейлиста. React-hook-form + RTK query

• Сохранение токена и работа с .env

• Зачистка данных (reset), unwrap для обработки ошибок  

• Удаление плейлиста (delete mutation)

• Обновление плейлиста (update mutation)

• Финальный рефакторинг

Data Updating и система тегов

• Автоматическое обновление данных без перезагрузки

• Tags, providing tags и invalidating tags

• Пример тегов для разных сущностей (плейлисты, пользователи)

• Как работает кэширование и рефетчинг

• Преимущества тегов: единый источник истины

Code Splitting в RTK Query

• Что такое code splitting и зачем он нужен

• Создание базового API

• Вынос общей логики в отдельные файлы

• Использование injectEndpoints

• Итоги внедрения: меньше бандл, выше скорость загрузки
  

Всё, что будет в остальном курсе, узнаете из этого видео:

А я завтра выложу новый видос про изучение JS, а на следующей неделе - новое видео про изучение RTK Query

Ссылка на источник

Не люблю петухон, JavaScript - one love