makecsx
makecsx
  • 15
  • 42 271
Работа с формами в React'e (от простого к сложному)
Здесь описываю то, как надо подходить к работе с формами в React экосистеме (Ну или как мы в команде подходим к этому делу:) ). Разбираю понятия контролируемых и неконтролируемых компонентов. Мотивацию использования библиотеки react-hook-form.
Переглядів: 453

Відео

React мемоизация - useCallback, useMemo, memo
Переглядів 6 тис.Рік тому
Здесь мы разберем исполнение React-код'а на уровне виртуальной машины, для того чтобы продемонстрировать, что именно происходит под капотом при использовании memo, useMemo и useCallback. 00:00 - Введение 01:10 - Стек. Контексты выполнения 04:15 - Пример React приложения 05:00 - Исполнение кода 07:29 - React элементы и React компоненты 13:13 - Повторный рендер 16:20 - useCallback 22:20 - memo 27...
Нежелательные перерисовки React-компонентов
Переглядів 979Рік тому
Здесь мы рассмотрим потенциально нежелательные ре-рендеры (re-renders), которые могут возникнуть при разработке React-приложения. Узнаем как можно избежать перерисовок компонентов без использования мемоизации React'a (React memo). 00:00 - Введение 00:30 - Начальное приложение 00:50 - Подход с плохой оптимизацией 02:28 - Обновление виртуального дерева 03:24 - React.memo 05:00 - Оптимизация ренде...
Tailwind классы захламляют компоненты? Решение есть!
Переглядів 1 тис.Рік тому
Давайте рассмотрим лучшие практики создания многократно используемых и легко сопровождаемых компонентов react на примере компонента badge. Мы будем использовать Typescript, TailwindCSS, JS и CSS . 00:00 - Введение 00:30 - TailwindUI компоненты 00:54 - Вариативность с class-variance-authority 06:42 - Дополнительная React стилизация Видео по `cn()` функции: ua-cam.com/video/jq1uvAE-EX4/v-deo.html
TS и React props'ы, полезная практика!
Переглядів 640Рік тому
00:00 - Проблема передачи пропсов 00:26 - Типизация пропсов 01:20 - Зависимые пропсы (подсказки IDE) 03:31 - Type Guards 04:20 - Доработка Оригинальное видео: ua-cam.com/video/9i38FPugxB8/v-deo.htmlfeature=shared (англ)
cn() - То, что нужно каждому Tailwind кодеру (clsx + twMerge)
Переглядів 1,6 тис.Рік тому
Почему вам стоит использовать утилитарную функцию cn(). 00:00 - Конфликт классов 01:00 - Стандартный tailwind сценарий 02:45 - tailwind-merge (twMerge) 03:58 - Условная стилизация 04:42 - Невозможность объектной стилизации 05:05 - Объявление cn() функции Оригинальное видео: ua-cam.com/video/re2JFITR7TI/v-deo.html (англ)
Разбор React Router 6.4+
Переглядів 595Рік тому
Узнай чем отличается React Router 6.4 от 6.x и как можно начать пользоваться его новыми фичами связанные с получением и отправкой данных! Код: github.com/academind/react-router-6.4-intro 00:00 - Вступление 00:49 - Проект 03:53 - Loader (получение данных) 05:33 - Переход на новую версию React Router 08:53 - Динамические параметры пути 11:10 - Обработка ошибок (errorElement) 14:36 - Action (отпра...
CS75 (продвинутый JavaScript) - Лекция 7
Переглядів 2 тис.4 роки тому
Прототипное наследование. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru
CS75 (продвинутый JavaScript) - Лекция 6
Переглядів 1,5 тис.4 роки тому
Область видимости (Scope). Lexical Scoping. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru
CS75 (продвинутый JavaScript) - Лекция 5
Переглядів 2,1 тис.4 роки тому
Область видимости (Scope). Lexical Scoping. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru
CS75 (продвинутый JavaScript) - Лекция 4
Переглядів 2,7 тис.5 років тому
Абстрактные операции (продолжение). JS-спецификация. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru
CS75 (продвинутый JavaScript) - Лекция 3
Переглядів 2,8 тис.5 років тому
Абстрактные операции. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru Timestamps: 0:00 Абстрактные операции 4:25 ToString 10:29 ToNumber 13:03 Coersion для Объектов 15:13 Абстрактная операция ToPrimitive( хинт ). 3 вида хинтов для ToPrimitive 30:41 ToPrimitive("string") 39:30 ToPrimitive("number")
CS75 (продвинутый JavaScript) - Лекция 2
Переглядів 4,2 тис.5 років тому
Фундаментальные объекты. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru Timestamps: 0:00 Присваивание объектов 1:43 NaN. Подробнее о NaN 5:08 Пишем определение NaN 8:32 Распространение NaN 10:43 Отрицательный ноль (-0) 11:50 Отрицательный ноль игнорируется 12:20 Определение отрицательного нуля. Object.is() 15:50 "Функции-Конструкторы, Создающие Встроенные Объекты" (Фундаментальн...
CS75 (продвинутый JavaScript) - Лекция 1
Переглядів 13 тис.5 років тому
История JS. Основы языка. Функции-конструкторы. Продвинутый JavaScript. Все материалы на сайте www.makecs75.ru Timestamps: 0:00 Движок JS 3:43 EcmaScript 7:47 Переменные 10:25 Операции и выражения 14:20 Типы данных 22:08 Объект и массив 25:26 Оператор typeof 29:47 Мусорное значение (undefined) 30:32 Хранение данных 33:46 Функции 42:24 Функции первого класса 48:09 Оператор if 48:31 Тернарный опе...
Глубокие основы JS. 0 - Введение
Переглядів 2,7 тис.5 років тому
Глубокие основы JS. 0 - Введение

КОМЕНТАРІ

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

    До новых встреч через год бахи ахь?))

  • @said-magomeddzhabrailov7911
    @said-magomeddzhabrailov7911 Місяць тому

    Доступное и понятное объяснение материала, красивая подача в виде приятных анимаций и отсутствие лишней воды! Респект!

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

    спасибо, очень информативно

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

    классный формат!!!

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

    Ух ты как подробно все и понятно обьясняешь !!! Вроде мелочи по инпутам, но что то новое узнал, что то обновил в памяти. теории сейчас мало хорошей на ютубе, в основном практика одна, в которой не обьясняется все (

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

    Хорошая подача материала и крутые анимации 👍

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

    какая красота, какая шикарная подача материала ! Спасибо за Ваш труд !

  • @ЕвгенийКулижников-ж2ф

    Привет! Продолжай снимать ролики, у тебя это получается делать на профессиональном уровне! Очень понятно объясняешь) Несмотря на то, что я уже работаю - все равно было полезно послушать тебя, только газ! От меня лайк, подписка

    • @ИванКозлов-й8в
      @ИванКозлов-й8в 2 місяці тому

      Полностью согласен!!! Не останавливайся, мне крайне интересно было слушать про JS 🎉 Благодаря твоим объяснения на легче дочитал книги Кайла Симпсона)

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

    класс!!

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

    Хорошо объяснил, но я понял это, только теперь, когда понимаю "контекст" и "замыкания"

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

    У чувака каша в голове он не понимает, чем стандарт отличается от спецификации.

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

      Насчёт спецификации это к Мурычу 😂

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

    Dal attu boila ha san wash

  • @gregor-nomad
    @gregor-nomad 6 місяців тому

    Лучший лектор по JS из всех, что когда либо встречались. Спасибо огромное! Всё очень доходчиво и понятно)

  • @donjuanfamily1128
    @donjuanfamily1128 7 місяців тому

    Кажется я встретил ментора 😄 Я найду и пересмотрю все знания по языку JS которые будут от этого преподавателя. Другие как-то костно язычно объясняют, фиг их поймешь. А тут сразу : "веб приложения - это бешенный интерактив". Все, мне другого объяснения не нужно. Я сразу принял к сведению масштаб и функциональность приложений в вебе. Или "выучить один язык и разрабатывать под все платформы, вот что дает JS, он реально имба". Всееее, сразу кратко, по делу, а главное доходчиво. От души.

  • @MaxKostenko-o6q
    @MaxKostenko-o6q 9 місяців тому

    Great video, huge thanks

  • @SeChelios
    @SeChelios 10 місяців тому

    Спасибо, в голове теперь порядок

  • @andygr1n1
    @andygr1n1 10 місяців тому

    Шикарное объясненье

  • @ruffle17
    @ruffle17 10 місяців тому

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

  • @sasharudenko5446
    @sasharudenko5446 11 місяців тому

    Мне кажется вы забыли упомянуть разницу между примитивами и классами с массивами.

  • @NeoCoding
    @NeoCoding 11 місяців тому

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

    • @NeoCoding
      @NeoCoding 11 місяців тому

      то есть например надо мне например стиль blue я создаю класс .blue {} в котором могу скомпоновать все эти классы тайлвинда .bg-blue-50 и тп

  • @NeoCoding
    @NeoCoding 11 місяців тому

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

  • @denimmart
    @denimmart 11 місяців тому

    Никакого параллельного выполнения кода??! Скажи это воркерам, кластерам в ноде, атомиксам и тд.. Зачем мне ютуб рекомендует это видео?!)

    • @makecsx
      @makecsx 11 місяців тому

      А эта тема интересная, для ее покрытия сейчас книжку читаю, так как только в одном проекте приходилось использовать worker и отсюда у меня могут быть пробелы в понимании. Но вся эта функциональность и параллельное выполнение кода предоставляется нам средой исполнения JS. У самого языка вроде нет никаких встроенных функций позволяющих создавать дополнительные потоки выполнения. Вот функциональность предоставляемая средой - это да. Плюс я UA-cam-рекомендации давно отключил через расширение, тогда и ерунды меньше в жизни бывает))

    • @denimmart
      @denimmart 11 місяців тому

      @@makecsx Верно, host среда предоставляет трэды. =) Javascript дополняется host средой. И если говорить про браузеры то одно API, а у ноды своё API. Но параллелизация есть уже прилично давно и там и сям. А эвент луп это всего лишь менеджер задач для рантайма.

  • @daniilkononchuk8837
    @daniilkononchuk8837 11 місяців тому

    Ни о чем. Болтоаня непонятная

  • @ЭльмираИльясова-г9у
    @ЭльмираИльясова-г9у 11 місяців тому

    Вы так классно объясняете, это любовь с первого просмотра!! Наконец то я поняла useCallback и useMemo Планирую посмотреть все ваши видео на канале, это просто алмаз ) Хочется задать вопрос к теме видео, как вы считаете, насколько нужно ударяться в использование memo в контексте избегания перерендеров компонентов? Писать memo для каждого компонента или же у вас есть какие-то примерные критерии, для каких компонентов стоит писать, а для каких нет?

    • @makecsx
      @makecsx 11 місяців тому

      Правильная композиция (организация вложенности) компонентов поможет избежать нежелательных перерисовок приложения. К 'memo' не особо часто приходилось прибегать, так как не каждый компонент имеет смысл оптимизировать. Стараюсь придерживаться идеи "преждевременная оптимизация - корень всех бед". Если надо оптимизировать производительность, то стараюсь правильно организовать композицию между компонентами (так, чтобы максимально сократить количество ре-рендеров). Если такое видится невозможным или бизнес требует быстрее выкатить изменение к проекту, тогда начинаю юзать 'memo'. :)

    • @ЭльмираИльясова-г9у
      @ЭльмираИльясова-г9у 11 місяців тому

      @@makecsx большое спасибо за развернутый ответ ))

  • @AlekseyLovchikov
    @AlekseyLovchikov 11 місяців тому

    Очень годный контент, спасибо! ❤

  • @dmitryts9093
    @dmitryts9093 11 місяців тому

    А что есть использовать useMemo внути компонента и в этом же компоненте в return возвращать мемоизированные данные? то есть внутри функции есть memoElement, а в return (<div>...{memoElement}...</div>) Условно const memoElement = useMemo(() => {<div>{users.map...}</div>}, [users])

    • @makecsx
      @makecsx 11 місяців тому

      Согласно документации есть 4 причины использовать useMemo: 1. Skipping expensive recalculations - Чтобы избежать ресурсозатратных вычислений 2. Skipping re-rendering of components - Чтобы избежать повторного ре-рендера компонентов 3. Memoizing a dependency of another Hook - Для мемоизации зависимости другого хука (useEffect, useCallback и т.п.) 4. Memoizing a function - Для мемоизации функции (рекомендуют юзать useCallback, но и с useMemo можно добиться такого же поведения) В видео я разбираю вторую (2) причину. В вашем случае применение useMemo подходит под первую (1) причину. Т.е. в вашем коде вы потенциально избегаете повторного создания массива и применения callback функции метода map на каждый элемент массива. Такого рода мемоизацию я делаю только когда прописываю какие-то страшные вычисления внутри callback-функции, а количество элементов в массиве (users) кажется внушительным:) Немного примитивный подход (без четких цифр и замеров производительности кода), но вот😅

  • @gabblz480
    @gabblz480 11 місяців тому

    не всегда стоит запариваться по поводу обновления компонентов, ведь мемоизация не бесплатна и если нет каких-то тяжелых вычислений, то и не стоит париться, проще перерисовать что-то ( в данном примере списки идут и тут нужна мемоизация, но в других случаях нужно думать об этом)

    • @dmitryts9093
      @dmitryts9093 11 місяців тому

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

  • @fuad2069
    @fuad2069 Рік тому

    очень крутое объяснение. Вам благодарность от всех джунов!

  • @web_chaos
    @web_chaos Рік тому

    tailwind-variants более гибкий и удобный

  • @web_chaos
    @web_chaos Рік тому

    зачем ещё ставить clsx или className, когда можно написать максимально просто и будет работать быстрее нет поддержки объектов, но к этому можно привыкнуть import { ClassNameValue, twMerge } from "tailwind-merge"; export const cn = (...args: ClassNameValue[]) => { return twMerge(args.filter(Boolean)); };

    • @makecsx
      @makecsx Рік тому

      Соглашусь, выглядит красиво) Объекты мы у себя в команде оставили из-за удобства чтения. Тут кому как нравится) А в плане скорости я даже особой разницы между 'classnames' и 'clsx' не видел, но команда настояла на переход к более оптимизированной либе, а я и не стал спорить). В любом случае, в текущих проектах такой уровень оптимизации мне пока не приходилось применять)

  • @localhost666
    @localhost666 Рік тому

    Очень крутое объяснение! Скажите, у вас есть полные курсы по фронту?

    • @makecsx
      @makecsx Рік тому

      Есть разные курсы, но я их давно снимал, поэтому не совсем такие какими бы я их хотел видеть сейчас) makecs138x.ru/ - курс по CSS makecs50.github.io/web/ - курс по вебу makecs75.ru/ - курс по JS (этот мне нравится, но тоже надо бы когда-нибудь освежить/перезаписать)

    • @localhost666
      @localhost666 Рік тому

      @@makecsx Редко встретишь такую качественную подачу материала без воды, у вас большой талант преподавать! Будь у вас полноценный курс по React, купил бы с удовольствием )

  • @BarcikMinusPTS
    @BarcikMinusPTS Рік тому

    Отличный разбор, спасибо

  • @Nearfulz
    @Nearfulz Рік тому

    2 года назад пересмотрел все твои лекции "продвинутый js", которые на канале. Никто так доходчиво не объясняет, спасибо за контент.

    • @bjol_Dg
      @bjol_Dg Рік тому

      просто ты других не слышал )) Нормально объясняет, но слишком быстро говорит. Такие темы для новичков нужно неторопливо объяснять.

    • @vasyavasin7364
      @vasyavasin7364 11 місяців тому

      ​@@bjol_Dg я на 1.5 смотрю, вроде норм)

    • @MaximLisyanskiy
      @MaximLisyanskiy 11 місяців тому

      Ulbi: 🗿

  • @tanercoder1915
    @tanercoder1915 Рік тому

    классное произношение названий на английском! еще твоя интерепретация где есть отдельно реакт в синем прямоугольничке имеет смысл если вспомнить что вообще react состоит из двух частей - react и reactDOM (синий прямоугольник) . белый прямоугольник - react

  • @АлексейБорисов-к3т

    Просто лучшее объяснение. Благодарю.👍

  • @notdefined9072
    @notdefined9072 Рік тому

    Как легко и просто... Объяснение без воды - топчик, продолжай в такой же форме :)

  • @askerkotsev363
    @askerkotsev363 Рік тому

    Кто можен выполнять js код? Хром? Красава))))))))

  • @timmyboy1687
    @timmyboy1687 Рік тому

    Очень полезная лекция! Спасибо!

  • @timmyboy1687
    @timmyboy1687 Рік тому

    Если стэйт вынесен в отдельный элемент зачем нам useeffect?

    • @makecsx
      @makecsx Рік тому

      В данном примере мы хотим, чтобы уведомление (Toast) отображалось только через 3 секунды после своего монтирования. Поэтому, чтобы таймер запустился после монтирования компонента, мы передаем useEffect'у в качестве первого аргумента функцию, внутри которой вызывается setTimeout, а в качестве второго аргумента - пустой массив. Только благодаря useEffect'у мы можем отследить монтирование и запустить какое-то действие в момент монтирования.

    • @timmyboy1687
      @timmyboy1687 Рік тому

      Спасибо! Начал смотреть Ваши лекции по джава скрипту, Вы очень доходчиво объясняете! Класс! @@makecsx

  • @whiteguards43
    @whiteguards43 Рік тому

    почему не classNames а tw-merge?

    • @makecsx
      @makecsx Рік тому

      Вы про библиотеку 'classnames'? Когда-то мне коллега по работе посоветовал 'clsx' библиотеку как более производительную альтернативу 'classnames' (бенчмарки: github.com/lukeed/clsx/tree/42354d3b81abd5044f947f93e528351e27e9a12a/bench), поэтому перешел на нее. А у 'tw-merge' другое предназначение - решение коллизий (конфликтов) классов.

  • @alucardmlbb243
    @alucardmlbb243 Рік тому

    спасибо вам огромное очень помогли с изучению теперь могу пользиваться блодоарся вам

  • @vadimveksler7699
    @vadimveksler7699 Рік тому

    Спасибо. Я когда учил реакт еще не было хуков и использовали классовые компоненты. И тогда чтобы оптимизировать компонент нужно было использовать Pure component или в лайфсайкл методе should component update сравнивать явно пропсы, которые хочешь оптимизировать. А с приходом хуков многие подзабили на это или не до конца поняли как все работает. pureComponent этот тот же React.memo по сути. Но вот, что еще можно подчеркнуть, что сами хуки useCalback или useMemo не только для того, чтобы оптимизировать пропсы компонентов обернутых в React.memo, но и для того, чтобы не делать лишние вычисления, так как реакту достаточно сравнить dependencies чтобы определить выполнять ли код внутри или нет, так вот по мимо этого это также экономит ненужные вычисления, и для меня это было всегда существенней, чем React.memo. Но все конечно зависит от конкретно взятой задачи

  • @benhuritp
    @benhuritp Рік тому

    ну и хуета , 99% видео вода

  • @romanvladimirov6161
    @romanvladimirov6161 Рік тому

    Спасибо за видео, у меня такой вопрос, разве в версии React 17 и выше не используется вызов __jsx (import { jsx as _jsx } from "react/jsx-runtime";) вместо React.createElement ?

    • @makecsx
      @makecsx Рік тому

      Благодарю! Глянул документацию, не знал что в экосистему React'a внесли такое изменение, мое личное знакомство начиналось с 16 версии, а этот апдейт я пропустил) Получается React.createElement рекомендуют применять только если разработчик сам решит не использовать JSX в своем коде, а функцию _jsx разрешается подставлять только компиляторам Babel или TypeScript (разработчикам нельзя к ней самим напрямую обращаться).

  • @rustamakhmetyanov4404
    @rustamakhmetyanov4404 Рік тому

    Спасибо, очень полезный контент

  • @rustamakhmetyanov4404
    @rustamakhmetyanov4404 Рік тому

    Спасибо за контент👍