senior_zone
senior_zone
  • 14
  • 50 461
React 19. Новые формы и actions на практике. Обзор нововведений
В этом видео мы рассмотрим React 19 RC. На практике разберемся с новыми хуками - useActionState, useFormStatus и useOptimistic и устно пробежимся по остальным нововведениям, таким как прокидывание ref в качестве пропса, React.use API и др.
Telegram - t.me/senior_zone
00:00 - О чем это видео
00:34 - Формы и actions
01:36 - Код примера
02:55 - useActionState
05:43 - useFormStatus
07:57 - useOptimistic
13:41 - Прочие обновления
14:02 - React.use
16:01 - Server Components, Server Actions
16:10 - Ref as a prop
16:50 - hydration errors
16:55 - Context as a Provider
17:36 - useDeferredValue
17:46 - meta, style, scripts
18:07 - preload api
18:19 - errors
18:35 - custom elements
19:08 - итоги
Переглядів: 800

Відео

Next 15 - обзор новой версии за 13 минут.
Переглядів 8212 місяці тому
В этом видео мы разберем все нововведения и "quality of life improvement" из нового анонса Release Candidate Next 15. Telegram - t.me/senior_zone 00:00 - О чем это видео 00:46 - Список нововведений 01:05 - Release Candidate 01:42 - React Compiler 03:52 - Hydration Errors 05:18 - Caching 07:44 - Partial Pre-Rendering 08:38 - next/after 10:03 - create-next-app, Turbopack 11:42 - external packages...
Аутентификация. Сессии и JWT
Переглядів 9 тис.6 місяців тому
В этом видео мы разберем, чем аутентификация отличается от авторизации и на практике освоим 2 самых известных подхода к их имплементации. Telegram - t.me/senior_zone 00:00 - Почему это важно понимать 01:00 - Чем авторизация отличается от аутентификации? 01:45 - Регистрация 02:05 - Аутентификация 02:34 - Авторизация 03:08 - Логинизация 03:48 - Сессии / Токены 04:05 - Сессионый подход 05:41 - Сес...
Unknown, any и never в TypeScript простыми словами.
Переглядів 1,5 тис.9 місяців тому
В этом видео постараюсь просто и доступно объяснить в чем отличие между unknown и never, ради каких целей они задумывались и какие задачи решают. А также рассмотреть тип never и практический способ его применения. Telegram - t.me/senior_zone 00:00 - Почему эти типы вызывают проблемы 00:39 - Определение any 01:33 - Определение unknown 01:55 - "Сужение" типов 02:35 - Определение never 03:20 - Пра...
Generics и Utility Types. Продвинутая база TypeScript.
Переглядів 1,3 тис.9 місяців тому
В этом видео мы рассмотрим базовые конструкции по динамическому взаимодействию с типами - Generic'ами и Utility типами. Поймем, как они работают, для чего применяются и познакомимся с интересными, практическими примерами. Telegram - t.me/senior_zone 00:00 - О чем будем говорить 00:28 - Что такое Generics и зачем они нужны 03:00 - Generics. Пример 2 04:03 - Generics. Пример 3 06:55 - Utility тип...
Инициализация состояния на фронтенде. Практика рефакторинга.
Переглядів 3,4 тис.10 місяців тому
Всем привет. В этом видео мы порассуждаем на тему "Как все-таки правильно инициализировать состояние во фронтенд приложении?" на примере React. Я продемонстрирую распространенную ошибку (на мой взгляд), объясню почему я считаю такой подход неверным и приведу более удачные примеры. Код из урока - github.com/senior-frontend/thoughts_init-state Telegram - t.me/senior_zone 00:00 - Что именно я счит...
Next.js 13 App Router - базовый курс за 40 минут.
Переглядів 4,4 тис.Рік тому
В этом видео мы рассмотрим все основные нововведения Next.js 13.4 App Router, их особенности и правила применения. Код из урока - github.com/senior-frontend/next-app-router Серверные компоненты - ua-cam.com/video/0gaXP88yvPc/v-deo.html Telegram - t.me/senior_zone 00:00 - О чем это видео 00:46 - Чем хорош Next.js 02:12 - Инициализация проекта 02:49 - Знакомство со структурой проекта 03:31 - Ч1: ...
React Server Components - разбираемся за 10 минут.
Переглядів 5 тис.Рік тому
В этом видео мы с вами разберем, что такое серверные компоненты, зачем они нужны и чем отличаются от других подходов к разработке гибридных веб-приложений. Код из урока - vercel.com/templates/next.js/react-server-components Полезные материалы: • frendyguo.me/server-component-the-react-way-to-ssr • www.thearmchaircritic.org/mansplainings/react-server-components-vs-server-side-rendering Telegram ...
useState в React. Прикладные нюансы и детали
Переглядів 1,9 тис.Рік тому
Подробно рассмотрим хук useState и нюансы его применения. Код из урока - github.com/senior-frontend/useState Telegram - t.me/senior_zone 00:00 - Почему useState опасен 01:25 - Зачем нужно состояние 03:09 - Нюанс №1 - логирование состояния 05:08 - Нюанс №2 - updater function 07:44 - Нюанс №3 - работа с предыдущим состоянием 09:18 - Батчинг 10:44 - flushSync 11:39 - Итоги
Контекст в React. useContext и вложенные Context.Provider
Переглядів 3 тис.Рік тому
Разберемся что такое prop drilling и как это фиксить, узнаем как работает контекст в React и как избежать лишних ререндеров при его использовании. Код из урока - github.com/senior-frontend/useContext Telegram - t.me/snr_fullstack 00:00 - Анонс последней темы в рамках серии React Hooks 00:33 - Prop Drilling 00:52 - Знакомство с кодом примера без использования контекста 02:39 - Почему Prop Drilli...
useEffect в React. Исправляем частую ошибку
Переглядів 9 тис.Рік тому
В этом видео мы рассмотрим хуки useEffect и useLayoutEffect, разберем их отличия, а также ознакомимся с очень распространенной ошибкой, которая может привести к race conditions и способами ее исправления Telegram - t.me/snr_fullstack 00:00 - Почему важно понимать useEffect 00:45 - Что такое useEffect 03:00 - Сноска про batching 03:45 - fetch запрос внутри useEffect 05:28 - cleanup функция 08:40...
Параллелизм в React. Новые хуки useTransition и useDeferredValue
Переглядів 2,2 тис.Рік тому
Рассмотрим новый механизм Concurrency в React 18 и новые хуки, позволяющие с ним работать. Как всегда, разберем все на примерах. Telegram - t.me/snr_fullstack 00:00 - Concurrent React 00:59 - хук useTransition 03:18 - startTransition 04:49 - isPending 05:29 - нюансы useTransition 06:38 - хук useDeferredValue 09:16 - Итоги
useRef в React. Сохраняем значение между ререндерами
Переглядів 1,8 тис.Рік тому
В этом видео мы разберем как работает хук useRef, узнаем его особенности и кейсы применения. Telegram - t.me/snr_fullstack 00:00 - Введение 00:41 - Сохранение ссылки на html-елемент 01:55 - Особенности useRef 02:38 - Сохранение примитива в useRef, ререндеринг 05:00 - Реальный кейс, сохранение предыдущего значения state
Мемоизация в React. Хуки useMemo, useCallback
Переглядів 6 тис.Рік тому
В этом видео мы разберем принципы мемоизации, ситуации, в которых она применяется и возможности React в виде хуков useMemo и useCallback Telegram - t.me/snr_fullstack 00:00 О мемоизации 00:43 useMemo 06:31 useCallback

КОМЕНТАРІ

  • @maximvoicu4155
    @maximvoicu4155 8 днів тому

    когда ждать видео по OAuth и OIDC ? тема супер интересная, особенно если сделать пример через google

  • @vova_dev
    @vova_dev 9 днів тому

    Вопросы, которые у меня были, здесь прекрасно освещены! С примерами. Спасибо!

  • @VeterSvobodi
    @VeterSvobodi 10 днів тому

    Автор, вернись. Пора!

  • @parmetra
    @parmetra 18 днів тому

    Добрый день! Скажите, пожалуйста, будет ли продолжение данной серии уроков? Очень интересная тема с вашей подачей.

  • @VladimirS.-sk5kh
    @VladimirS.-sk5kh 20 днів тому

    Очень круто, но обещанного следующего видео нет на канале

  • @KostyaN698
    @KostyaN698 26 днів тому

    Авторизация по JWT не насколько уж и не безопасна. У JWT имеется payload, в котором находится JTI (уникальный идентификатор токена). Ничто не мешает хранить JTI в БД, после чего смотреть имеется ли данный JTI в БД.

  • @user-nu1sz1ve1p
    @user-nu1sz1ve1p Місяць тому

    Супер! Осталось только применить на практике.

  • @JsMaster
    @JsMaster Місяць тому

    Годный контент, спасибо 🤝

  • @scorp9838
    @scorp9838 Місяць тому

    👍👍

  • @eugenekoiner
    @eugenekoiner Місяць тому

    а если юзер пароль сменит, токен не инвалидируется?

  • @user-zr8tq3dq5g
    @user-zr8tq3dq5g Місяць тому

    💅

  • @RamaRama-qv3jo
    @RamaRama-qv3jo Місяць тому

    Супер! Лучшее объяснение новых фич!

  • @VaeV1ct1s
    @VaeV1ct1s Місяць тому

    Круто, в фронтенде придумали глобалы

  • @kegorfx
    @kegorfx Місяць тому

    хорошо, но масштаб текста\кода лучше увеличить - очень мелко

    • @senior_zone
      @senior_zone Місяць тому

      Хм, уже слышал это замечание, так что в VSCode использовался 16 фонт сайз, в приложении вообще 48й. Про сам блог-пост не подумал, там мб действительно мелко. Или даже код в редакторе сложно разглядеть было?

    • @kegorfx
      @kegorfx Місяць тому

      @@senior_zone в браузере ещё норм, а в редакторе, на мой взгляд, лучше на пару шагов увеличить шрифт

  • @vladimirpuzey713
    @vladimirpuzey713 Місяць тому

    Наверное, лучший разбор React 19: доступные примеры, отсутствие воды 👍

  • @lanaseg_
    @lanaseg_ Місяць тому

    ✊🏼🔝

  • @qwezxc9758
    @qwezxc9758 Місяць тому

    Спасибо за видео, осталось найти время перевести проект с 16.8 реакта :D

  • @senior_zone
    @senior_zone Місяць тому

    17:02 ua-cam.com/video/nuQDEdh1a1E/v-deo.html 😅

  • @whitespace2925
    @whitespace2925 Місяць тому

    У тебя отличный контент, детально разбираешь процесс того, что происходит, а главное доходчиво. Спасибо.

  • @baileysli6235
    @baileysli6235 Місяць тому

    Это лучшее объяснение, что я видел. Подписка

  • @404Negative
    @404Negative 2 місяці тому

    тоесть только в 15 версии реализовали БАЗОВУЮ функциональность, которую обязан реализовывать любой фронтенд фреймворк. возникает вопрос. а для чего нужны были все предыдущие версии ?? корректная перерисовка DOM была реализована еще 10 лет назад во Vue 2.

  • @user-pi1vr6rf1k
    @user-pi1vr6rf1k 2 місяці тому

    Было бы полезно увидеть видео о том какие задачи можно/нужно возлагать на бэкенд некста, а какие нужно разрабатывать в рамках большого бэкенда, к примеру на несте. Прост у меня кроме как ssr, а так же какие то доступы к сторонним сервисам и проксирования некоторых запросов на большой бэк больше ничего не приходит в голову. Хотелось бы услышать твоё мнение как правильно готовить эту прослойку. Есть библиотеки для авторизации для некстового сервера, есть призма. А зачем это всё есть, не очень понятно) Некстовый сервак явно не способен заменить полноценный бэк.

  • @user-de6tq3zr6q
    @user-de6tq3zr6q 2 місяці тому

    Не часто пишу комментарии Но тут захотелось сказать спасибо за твое видео!

  • @kowkavn2356
    @kowkavn2356 2 місяці тому

    В 14 next (AppRouter) меня сильно возмутило что дев сборка и прод сборка неконсистентны. Разработал в дев режиме большой функционал, а чтобы удачно собралось в билд, пришлось половину закомментить в моменте чтобы просто запустить. Поэтому и желания пока что писать на Next не особо много. Хотя плюсы перекрывают все минусы в некоторых ситуациях.

  • @RamaRama-qv3jo
    @RamaRama-qv3jo 2 місяці тому

    Не прошло и три года, с возвращением)

  • @shittywizzard5727
    @shittywizzard5727 2 місяці тому

    Спасибо за обзор! Наконец-то ты вернулся)

  • @user-ks6cn7or2c
    @user-ks6cn7or2c 2 місяці тому

    Лучшее объяснение про виды аутентификации из того, что я видел. Маленькая поправка - base64 это про кодирование, а не шифрование. То что закодировано с помощью base64 любой сможет раскодировать.

  • @vadem_zip
    @vadem_zip 2 місяці тому

    Легенда!!

  • @smoke2638
    @smoke2638 3 місяці тому

    ты супер красавчик! Жду новых видосов.

  • @andrewa2524
    @andrewa2524 3 місяці тому

    Супер! Локанично, с примером, всё по делу. Когда следующее видео?

    • @senior_zone
      @senior_zone 3 місяці тому

      Скоро) Работа и жизнь последние 2 месяца встали впереди канала, но теперь скоро

  • @vadem_zip
    @vadem_zip 3 місяці тому

    Спасибо!!

  • @404Negative
    @404Negative 3 місяці тому

    и когда же новое видео ?? о_О

  • @TesliaAnna
    @TesliaAnna 3 місяці тому

    Пересмотрела кучу видео на эту тему. Только после этого стало понятно 👍

  • @asifabbasov3801
    @asifabbasov3801 3 місяці тому

    Где взять код из видео?

  • @dinliri472
    @dinliri472 4 місяці тому

    Красава, молодец, все понятно. Умеешь. Могёшь)))

  • @dmitrym840
    @dmitrym840 4 місяці тому

    Спасибо большое

  • @mego
    @mego 4 місяці тому

    гений. спасибо с useLayoutEffect

  • @Delicatamente
    @Delicatamente 4 місяці тому

    17:25 рекомендую в случае фейла авторизации запросов всё-таки использовать 403 код. 401 это для ошибки аутентификации.

  • @Delicatamente
    @Delicatamente 4 місяці тому

    21:00 я бы еще добавил, что если произойдёт утечка секрета, тогда вся система авторизации станет разоблачена, т.е. любой пользователь сможет сам клепать себе токены и сервер никак не сможет на это повлиять (unless сервер вайпнет секрет и как следствие все токены выданные до станут невалидными). В случае с сессиями, если произошла утечка конкретной сессии, то угроза значительно меньше потому что это касается только одного конкретного пользователя + как ты и сказал, её можно удалить на сервере. Спасибо за видео, очень структурирована и полезно!

  • @vestakashirets3760
    @vestakashirets3760 4 місяці тому

    Спасибо за отличное изложение темы, четко и без лишней воды! Сразу все улеглось в голове в четкую схему 👍

  • @fuuuns
    @fuuuns 4 місяці тому

    Очень качественное изложение. Не все преподаватели способны так детально и интересно подать материал. Вопрос, что лучше, сессии или токен возник еще на 10 минуте. И я был счастлив, что автор этот ГЛАВНЫЙ вопрос предусмотрел. Уважение ❤

  • @404Negative
    @404Negative 5 місяців тому

    если в бд миллион сессий, то достаточно её проиндексировать бинарным деревом и вуаля, проблема с сессиями решена ведь сложность бин поиска O(n) = log n. и добавлять сессии в такую бд тоже легко, потому что это бинарное дерево. остаётся только поворачивать дерево раз в час и никаких проблем с производительностью.

    • @coryphoenixxx8238
      @coryphoenixxx8238 4 місяці тому

      Нифига ты. Не пробовал устроиться в Reddit?

    • @404Negative
      @404Negative 4 місяці тому

      @@coryphoenixxx8238 что не так ?

    • @vladimircreator
      @vladimircreator 3 місяці тому

      А разве проблема именно в этом? Проблема ведь в памяти. Столько сессий хранить.

    • @404Negative
      @404Negative 3 місяці тому

      @@vladimircreator хранить миллиард сессий стоит копейки

    • @vladimircreator
      @vladimircreator 3 місяці тому

      @@404Negative я и не спорю. Просто речь не о производительности шла же

  • @whiteltd5970
    @whiteltd5970 5 місяців тому

    как делать авторизацию без пароля ? именно с подтверждением емейла по коду из почты - это сейчас самый надежный вариант, но каким образом это использовать пока пытаюсь узнать

  • @whiteltd5970
    @whiteltd5970 5 місяців тому

    жаль что реализация не на nest js

  • @RamaRama-qv3jo
    @RamaRama-qv3jo 5 місяців тому

    Супер подача материала! Жаль так редко новые темы.

    • @senior_zone
      @senior_zone 5 місяців тому

      Много работы сейчас. Стараюсь разгрузиться, чтобы почаще видео выпускать

  • @TheLevius
    @TheLevius 5 місяців тому

    14:00 - ошибка. Алгоритм шифрования для JWT-токена можно выбирать HMAC, RSA, RSA-PSS, ECDSA с хеш-функцией SHA-256/384/512. Base64 - не шифрование, а формат кодирования. Формат шифрования можно не указывать в заголовках токена

  • @TheLevius
    @TheLevius 6 місяців тому

    Самый лучший ролик в ру сегменте по теме нового Next

  • @bagga_lev
    @bagga_lev 6 місяців тому

    Один из лучших каналов, все максимально понятно ! Большое спасибо 🙏

  • @user-re7hx3sq2c
    @user-re7hx3sq2c 6 місяців тому

    Отличная тема, жаль только за кадром остался вопрос безопасности, но наверное тогда бы ролик занял в два раза больше времени

  • @Markeldo
    @Markeldo 6 місяців тому

    Отличное видео: всё по полочкам. Хоть стал понимать, что за JWT мне тут на новой работе подпихивают ))))) Спасибо. Лайк-подписка ;-)