@@ayub_begimkulov дополню: неконтролируемая привычка крутить колёсико мыши и прыгать по коду сильно мешает смотреть и понимать происходящее. Скорость подачи - не свойственная для Урока, но больше походит на Объяснение одного разработчика другому - вышестоящему - того, что ты сделал. Что-то вроде рабочего отчета на ревью. И в этом прям беда.
Спасибо за видео. Очень толковые нужные вещи разбираешь. но я поддержу предыдущего комментатора "Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко раздражает и мешает сосредоточиться"
Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко разражает и мешает сосредоточиться
@@ayub_begimkulov расскажи пожалуйста в данной теме, про замыкания и как они связаны с реакт волокном. И хотелось бы увидеть хук useState в ванилла джс. И ещё, ты проводишь менторство?
Аюб. Я наткнулся на твой канал недавно. Но ты меня заинтересовал. В отличие от других, впервые я вижу что-то сложное, а не то, что есть в доке реакта. Не знаю, как работают алгоритмы ютуба. Первое видео, которое мне попалось, это собес джуна, где в конце ты задал задачку на useRef. Это явно вопрос не на джуна. Затем я посмотрел видео на мидла, где в конце ты задал то ли похожую, то ли ту же самую задачу на useRef. Я подумал - на этом уровне есть о чём подумать. В данном видео я ожидал увидеть, в каких же случаях использовать контекст. Я ожидал, что контекст будет использоваться вместе с редакс/мобкс(нужное вставить). Но нет, ты показал обсервер-паттерн + что-то сверху(показал свой вариант сторов грубо говоря). У меня есть несколько вопросов: - в каких случаях использовать контекст, если на проекте уже используются сторонние библиотеки для управления состоянием? - сколько тебе лет?(может где-то есть инфа, я не в курсе, не искал) - какой подход к архитектуре фронтенд-приложения в данный момент самый лучший или удобный по твоему мнению(fsd, модули или др.) - свой предыдущий душный коммент я удалил(дважды ;) ) - что меня беспокоит больше всего(надеюсь, что и всех остальных), это то, как разрабатывать фронтенд на React по SOLID. На этом моменте я хочу сказать свои мысли, как я понимаю SOLID в React. И я очень надеюсь на твой ответ, как сеньора. S - компонент делает что-то одно. Если нужно делать GET--запрос на сервер, то делаем {который внутри: 1) Отображает данные; 2) отображает состояние загрузки; 3) показывает ошибку} (Я туповат, для меня это выглядит как кастомный хук useFetch + рендер+паттерн) ). O - Использовать композицию children(это просто ОФИГЕННО, open-closed === чел, используй children, не надо прокидывать пропсы на 2(3, 4, 5 - 1000000000000000) уровней вниз (вопрос только в ререндерах) ( а вот если лагает, то пора попробовать React.memo, useReducer, useMemo, useCallback) L - то, что я нашёл, так это блять {...props} Моя реакция -> ;). Неужели это правда??? I - Принцип разделения интерфейса. Говорит о том, что не надо привязываться к структуре объекта. Он говорит о том, что нужно использовать те поля, которые используются. Нах нам огромный объект, если мы от него хотим только 2 поля (название и дату создания, например). В контексте реакта я вижу это кол-вом пропсов(Хочу знать правильный ответ от сеньора) D - инверсия зависимостей. Если брать реакт, то это тупо делегирование ответственности пропсу. Типа внутри компонента есть кнопка например, и у неё есть онклик. Так пусть лучше этим онкликом занимается пропс, чем сам компонент, ведь тогда компоненту пох, а вот пропс, и чел снаружи об этом беспокоится.
оптимизация выглядит как оверинженириг, проще тот же редакс подключить. Контекст ведь обычно используют для чуть более сложных компонентов, типо календарей и т.д. На мой взгляд достаточно мемоизировать передаваемый объект в value
Моя задача тут была показать то, какие есть возможности. Уже вышло видео про redux vs context. И я как там советую не пилить свои велосипеды. Однако подобная реализация, как ты и сказал, может быть очень полезна для сложных компонентов, по типу DatePicker и тд., чтобы получать меньше апдейтов. А стор в либах юзать не очень прикольная идея.
Трюк с null в initial values для контекста очень хорош только, если state выносить из провайдера выше (в компонент Recommended) и передавать в AppProvider. А если AppProvider делать так, чтобы он не принимал начальные значения, а инкапсулировал state в себе (при помощи компонента-обертки с useState), то вроде как уже придется мириться с тем, что хранимые значения могут быть null/undefined или выдумывать начальные значения, как было показано в ролике(()=>{} для функции, например).
А был видос такой же только не про контекст, а про редакс тулкит? Если нет можно сделать. Про подводные камни рассказать, что не написано в документации
привет, можешь посоветовать курс для повышение квалификации для мидлов? спс хотел купить курс у улби тв, но че то не знаю, почитал че они будут делать и понял что половину я знаю.... и не купил) и вот думаю может есть какие курсы хорошие еще
Как всегда уровень )) Прости за глупый вопрос react dev насколько хорошо нужно уметь верстать? мне нравится ковырять js + ts, но вот верстка вообще не нравится
Нужно знать на том уровне, чтобы ты мог спокойно заверстать какой-то бизнес-макет. Да, какие-то места подсмотреть можно, но не так, чтобы ты каждые 5 минут подсматривал в mdn.
Привет. Было бы интересно глянуть как оптимизированный вариант ты бы реализовал для SSR. Я его использовал как паттерн, но пришлось выкручиваться при замене uLE и uE хуков. Контент как всегда отличный. Спасибо!
Привет! А с чем конкретно были проблемы? С useLayoutEffect? Можно создать обертку useIsomorphicLayoutEffect, который будет работать, как useEffect на сервере и как useLayoutEffect на клиенте.
Я никогда не понимал, какой смысл использовать контекст с оборачиванием, если можно просто создать глобальный объект и его импортировать в компоненты? Мы же так и так импортируем контекст в хуки для взаимодействия с данными
лишние строчки с импортированием. Что-то поменяется - придется везде менять. Если создать хук и получать все данные и методы через него - то другое дело. А если Proxy использовать, то получился бы mobx. Только непонятно зачем нужен этот велосипед
@@inqvisitor3722 так я не вижу основной причины/преимущества использования контекста, он ничего не добавляет, те же самые импорты были бы если вместо create context использовали бы обычный объект
По сути контекст из себя представляет имплементацию dependency injection в рамках React. Если использовать глобальный объект - ты не сможешь так легко подменить его значение на моковые для тех же тестов например. Ну и плюс контекст позволяет отслеживать иерархию компонентов и переписывать его значение для определенного куска дерева. В общем, плюсов тут много)
@@ayub_begimkulov да мне кажется это проблема больше моя. Так как на практике такого не использовал и не очень понимаю то о чем ты говоришь. Но это круто, такого контента мало😅 Продолжай!
контент ценный, спасибо автору. Но для меня оказалось сложным воспринимать и укладывать в голове всю информацию с такой скоростью и при этом очень быстрый скроллинг по страницам - приходится как-то отматывать и уже позже склеивать аудио и видео контент.
![[3][LIVE] Пишем приложение на React для замера скорости печати](http://i.ytimg.com/vi/MdI8-E1_RTQ/mqdefault.jpg)
Спасибо! Под конец, где пишется свой стор, тяжко местами понимать, но оно понятно, около сеньорская тема раскрывается
А можешь раскрыть мысль? На каком моменте стало не понятно? Что можно было бы улучшить?
Тоже самое. На участке "оптимизируем рендеры" плыть начинаю
@@ayub_begimkulov дополню: неконтролируемая привычка крутить колёсико мыши и прыгать по коду сильно мешает смотреть и понимать происходящее.
Скорость подачи - не свойственная для Урока, но больше походит на Объяснение одного разработчика другому - вышестоящему - того, что ты сделал. Что-то вроде рабочего отчета на ревью. И в этом прям беда.
Ты просто маг и чародей. Очень круто
Очень крутая подача информации, не перестану это повторять) спасибо 👍
Спасибо за фидбэк!
спасибо за контент
не за что!
спасибо большое за полезный контент)
Рад помочь!
Спасибо за видео. Очень толковые нужные вещи разбираешь. но я поддержу предыдущего комментатора "Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко раздражает и мешает сосредоточиться"
Да, есть такая проблема. Постараюсь не повторять в дальнейшем. Спасибо за фидбэк!
Спасибо! Продолжай.
спасибо за фидбэк!
Лайкос не глядя
Спасибо!
Привет, мог бы ты рассказать , как сам учишься и как в целом дошёл до уровня senior ?
Спасибо за гайд и отличную подачу информации🙏
Рад помочь!
Полезно, спасибо
Рад помочь!
Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко разражает и мешает сосредоточиться
Да, есть плохая привычка. В новых видео кажется смог избавиться от этого)
Ayub, сделай пж видео с примерами замыкания. Сложные примеры желательно.
Мб покажешь замыкание в реакт елементах.
Качество выросло, круто)
Спасибо за фидбэк! Записал себе в список.
@@ayub_begimkulov расскажи пожалуйста в данной теме, про замыкания и как они связаны с реакт волокном.
И хотелось бы увидеть хук useState в ванилла джс.
И ещё, ты проводишь менторство?
Вот это мы смотрим.
Спасибо за фидбэк!
Аюб. Я наткнулся на твой канал недавно. Но ты меня заинтересовал. В отличие от других, впервые я вижу что-то сложное, а не то, что есть в доке реакта. Не знаю, как работают алгоритмы ютуба. Первое видео, которое мне попалось, это собес джуна, где в конце ты задал задачку на useRef. Это явно вопрос не на джуна. Затем я посмотрел видео на мидла, где в конце ты задал то ли похожую, то ли ту же самую задачу на useRef. Я подумал - на этом уровне есть о чём подумать. В данном видео я ожидал увидеть, в каких же случаях использовать контекст. Я ожидал, что контекст будет использоваться вместе с редакс/мобкс(нужное вставить). Но нет, ты показал обсервер-паттерн + что-то сверху(показал свой вариант сторов грубо говоря). У меня есть несколько вопросов:
- в каких случаях использовать контекст, если на проекте уже используются сторонние библиотеки для управления состоянием?
- сколько тебе лет?(может где-то есть инфа, я не в курсе, не искал)
- какой подход к архитектуре фронтенд-приложения в данный момент самый лучший или удобный по твоему мнению(fsd, модули или др.)
- свой предыдущий душный коммент я удалил(дважды ;) )
- что меня беспокоит больше всего(надеюсь, что и всех остальных), это то, как разрабатывать фронтенд на React по SOLID.
На этом моменте я хочу сказать свои мысли, как я понимаю SOLID в React. И я очень надеюсь на твой ответ, как сеньора.
S - компонент делает что-то одно. Если нужно делать GET--запрос на сервер, то делаем {который внутри: 1) Отображает данные; 2) отображает состояние загрузки; 3) показывает ошибку} (Я туповат, для меня это выглядит как кастомный хук useFetch + рендер+паттерн) ).
O - Использовать композицию children(это просто ОФИГЕННО, open-closed === чел, используй children, не надо прокидывать пропсы на 2(3, 4, 5 - 1000000000000000) уровней вниз (вопрос только в ререндерах) ( а вот если лагает, то пора попробовать React.memo, useReducer, useMemo, useCallback)
L - то, что я нашёл, так это блять {...props} Моя реакция -> ;). Неужели это правда???
I - Принцип разделения интерфейса. Говорит о том, что не надо привязываться к структуре объекта. Он говорит о том, что нужно использовать те поля, которые используются. Нах нам огромный объект, если мы от него хотим только 2 поля (название и дату создания, например). В контексте реакта я вижу это кол-вом пропсов(Хочу знать правильный ответ от сеньора)
D - инверсия зависимостей. Если брать реакт, то это тупо делегирование ответственности пропсу. Типа внутри компонента есть кнопка например, и у неё есть онклик. Так пусть лучше этим онкликом занимается пропс, чем сам компонент, ведь тогда компоненту пох, а вот пропс, и чел снаружи об этом беспокоится.
оптимизация выглядит как оверинженириг, проще тот же редакс подключить. Контекст ведь обычно используют для чуть более сложных компонентов, типо календарей и т.д. На мой взгляд достаточно мемоизировать передаваемый объект в value
Моя задача тут была показать то, какие есть возможности. Уже вышло видео про redux vs context. И я как там советую не пилить свои велосипеды.
Однако подобная реализация, как ты и сказал, может быть очень полезна для сложных компонентов, по типу DatePicker и тд., чтобы получать меньше апдейтов. А стор в либах юзать не очень прикольная идея.
почему, например мне нужно 1 состояние, остальное все посредством того же react-query, а в контексте авторизацию хранить=)
Трюк с null в initial values для контекста очень хорош только, если state выносить из провайдера выше (в компонент Recommended) и передавать в AppProvider. А если AppProvider делать так, чтобы он не принимал начальные значения, а инкапсулировал state в себе (при помощи компонента-обертки с useState), то вроде как уже придется мириться с тем, что хранимые значения могут быть null/undefined или выдумывать начальные значения, как было показано в ролике(()=>{} для функции, например).
Стоит еще показать, как быть, когда селектор возвращает несколько значений. Типа state => ({ isLoading: state.isLoading, users: state.users })
можно вторым аргументом передать shallowEqual - `useSelector(state => ({...}), shallowEqal)`
А был видос такой же только не про контекст, а про редакс тулкит? Если нет можно сделать. Про подводные камни рассказать, что не написано в документации
th-cam.com/video/NqzdVN2tyvQ/w-d-xo.html
Есть видос про топ 6 ошибок - th-cam.com/video/edmXoRwgQeI/w-d-xo.html
привет, спасибо за труд, видео очень полезное.
Можешь записать про _proto_ & prototype.
Коммент для продвижения
Спасибо!
привет, можешь посоветовать курс для повышение квалификации для мидлов? спс хотел купить курс у улби тв, но че то не знаю, почитал че они будут делать и понял что половину я знаю.... и не купил) и вот думаю может есть какие курсы хорошие еще
Как всегда уровень )) Прости за глупый вопрос react dev насколько хорошо нужно уметь верстать? мне нравится ковырять js + ts, но вот верстка вообще не нравится
Нужно знать на том уровне, чтобы ты мог спокойно заверстать какой-то бизнес-макет. Да, какие-то места подсмотреть можно, но не так, чтобы ты каждые 5 минут подсматривал в mdn.
Крутой видос! Спасибо большое!
subscribers можно было создать как Set?
Да, сет тут тоже можно было использовать.
Привет. Было бы интересно глянуть как оптимизированный вариант ты бы реализовал для SSR. Я его использовал как паттерн, но пришлось выкручиваться при замене uLE и uE хуков. Контент как всегда отличный. Спасибо!
Привет! А с чем конкретно были проблемы? С useLayoutEffect?
Можно создать обертку useIsomorphicLayoutEffect, который будет работать, как useEffect на сервере и как useLayoutEffect на клиенте.
@@ayub_begimkulov Да сначала я так и сделал, правда потом переделал под свои нужды. Спасибо!
дайте пожалуйста название канала в телеграмм, я не могу по ссылке перейти
@ayub_begimkulov_coding
Привет! Спс за труд, за видео, много нового узнаю.
А почему ты не используешь тип VoidFunction вместо записи ()=>void
Я даже не знал про него) Спасибо за фидбэк!
а смысл выпендриваться? Тоже самое что использовать выражение if(!~some.indexOf()) просто из-за того что знаешь. Но попробуй потом коллегам объяснить
запиши такое видео по react lazy
Посл часть, где показываешь отпимизацию рендеров через стор на минималках. Такой код нужно уметь писать в общем джуну? А то крыша уже едет от инфы))
Нет, джуну это знать не нужно, но рано или поздно все равно нужно понять, как это все работает.
@@ayub_begimkulov спс за ответ. Тож думаю, что джуну не нужно, только и джуны не нужны))
Я никогда не понимал, какой смысл использовать контекст с оборачиванием, если можно просто создать глобальный объект и его импортировать в компоненты? Мы же так и так импортируем контекст в хуки для взаимодействия с данными
а рендер как будет происходить
@@olegivanov80 так мы в этом объекте также функцию сетстейта будем хранить, так же как и в провайдере и стейт будет обновляться абсолютно также...
лишние строчки с импортированием. Что-то поменяется - придется везде менять. Если создать хук и получать все данные и методы через него - то другое дело. А если Proxy использовать, то получился бы mobx. Только непонятно зачем нужен этот велосипед
@@inqvisitor3722 так я не вижу основной причины/преимущества использования контекста, он ничего не добавляет, те же самые импорты были бы если вместо create context использовали бы обычный объект
По сути контекст из себя представляет имплементацию dependency injection в рамках React. Если использовать глобальный объект - ты не сможешь так легко подменить его значение на моковые для тех же тестов например. Ну и плюс контекст позволяет отслеживать иерархию компонентов и переписывать его значение для определенного куска дерева. В общем, плюсов тут много)
Много полезной информации, которая пока что не понятна)
А можешь рассказать, на каком моменте стало не понятно? Есть моменты, которые можно улучшить с моей стороны?
@@ayub_begimkulov да мне кажется это проблема больше моя. Так как на практике такого не использовал и не очень понимаю то о чем ты говоришь. Но это круто, такого контента мало😅
Продолжай!
контент ценный, спасибо автору. Но для меня оказалось сложным воспринимать и укладывать в голове всю информацию с такой скоростью и при этом очень быстрый скроллинг по страницам - приходится как-то отматывать и уже позже склеивать аудио и видео контент.
Ты откуда Аюб?
Привет Аюб, темы у тебя интересные, но не интересно смотреть на готовое решение. Лучше в видео пиши код сам.
Спасибо за контент.
Проблема в том, что писать код и объяснить в то же время очень сложно. Надо подумать, как лучше все это организовать.