Reactify
Reactify
  • Видео 73
  • Просмотров 350 334
Разбор задач по Event Loop с собеседований
В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.
Event Loop, JavaScript, стек вызовов, микротаски, макротаски, собеседование, визуализация, разбор задач, JS задачи, асинхронность, Event Loop в JavaScript, микротаски и макротаски, интерпретация кода, JavaScript для собеседования.
Менторство до...
Просмотров: 878

Видео

5 типичных задач по JavaScript на собеседовании
Просмотров 1,5 тыс.14 часов назад
В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика! - Задача на строки, методы и циклы - Задача на строки, циклы и условия - Задача на колбек, массивы, прототип и циклы - Задача на объекты, массивы, графы и цепочки - Задача на промисы, замыкания и асинхронность Менторство до трудоустройства: reactify.ru Тренажер собеседов...
Принципы SOLID в React
Просмотров 2,4 тыс.День назад
Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы. - Single Responsibility Principle (Принцип единственной ответственности) - Open/Closed Principle (Принцип откр...
5 сложных концепций Функций в JavaScript для собеседований
Просмотров 2,4 тыс.21 день назад
В этом видео мы разберем 5 сложных концепций Функций в JavaScript, которые спрашивают на собеседовании на фронтенд-разработчика! - Колбеки (Callbacks) - Замыкания (Closures) - Чистые функции (Pure Functions) - `this` в функциях - Асинхронные функции (async/await) Менторство до трудоустройства: reactify.ru Тренажер собеседований: yeahub.ru/ Отзывы: t.me/mentor_reactify Telegram канал: t.me/react...
5 продвинутых паттернов в React
Просмотров 7 тыс.21 день назад
Каждый разработчик хочет писать универсальный, чистый код, который не будет повторяться, будет оптимизированным и легкомасштабируемым. В этом видео мы разберем 5 продвинутых паттернов и подходов в React - Slot Pattern (Component Injection) - Render Prop - Proxy Component - Function as a Child - Compound Components Менторство до трудоустройства: reactify.ru Тренажер собеседований: yeahub.ru/ Отз...
5 типичных задач по TypeScript для Frontend собеседований
Просмотров 4 тыс.28 дней назад
В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика! - Типизация функций - Дженерики (Generics) - Extends, keyof, typeof - Утилитарные типы (Utility Types) - Маппинг типов (Mapped Types) Менторство до трудоустройства: reactify.ru Тренажер собеседований: yeahub.ru/ Отзывы: t.me/mentor_reactify Telegram канал: t.me/reactify_...
5 главных правил THIS для Frontend собеседований
Просмотров 1,9 тыс.Месяц назад
В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика! - Как работает this в стрелочных функциях. - Почему важно, как вызывается функция, а не где она создается. - Как this ведет себя в методах объектов. - Как режим выполнения (strict или нестрогий) влияет на значение this. - Как управ...
Логика Дженериков в TypeScript: Generics, Extends и Conditional Types
Просмотров 1,8 тыс.Месяц назад
В этом видео рассмотрена одна из ключевых тем в TypeScript - Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода. Мы подробно разберем: - Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках. - Условные типы (conditional types) и ограничения через extends. - Логику использования дженериков, чтобы...
Паттерн Адаптер в JavaScript. Продвинутый Frontend на реальных примерах
Просмотров 1,7 тыс.3 месяца назад
В этом видео мы рассмотрим Паттерн Адаптер (Adapter) в контексте JavaScript и Frontend разработки. Для проекта Рецептов используем Webpack, JavaScript. Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом JavaScript и паттернах проектирования. Ссылка на дизайн и репозиторий в телеграмм канале. Теория Паттернов: refactoring.guru/ru/design-patterns Менторство: reacti...
Паттерн Наблюдатель в React. Продвинутый Frontend на реальных примерах
Просмотров 1,4 тыс.4 месяца назад
В этом видео мы рассмотрим Паттерн Наблюдатель (Observer) в контексте React и Frontend разработки. Для проекта Маркет используем Vite, FSD, TypeScript. Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования. Менторство: reactify.ru Отзывы: t.me/mentor_reactify Telegram канал: t.me/reactify_IT Сообщество: community.reactify.ru Теория П...
Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy
Просмотров 16 тыс.4 месяца назад
В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий. В следующих видео мы детально разберем каждую технологию по отдельности и начнем пошаговое создание собственного п...
Паттерн Адаптер в React. Продвинутый Frontend на реальных примерах
Просмотров 2,6 тыс.4 месяца назад
В этом видео мы рассмотрим Паттерн Адаптер (Adapter) в контексте React и Frontend разработки. Для проекта Маркет используем Vite, FSD, TypeScript. Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования. Менторство: reactify.ru Отзывы: t.me/mentor_reactify Telegram канал: t.me/reactify_IT Сообщество: community.reactify.ru Теория Паттер...
Frontend Гладиаторы: Стань королем Web арены
Просмотров 8575 месяцев назад
Наш турнир - это возможность прокачать свои знания в игровой форме, подготовиться к собеседованиям и получить признание среди единомышленников. Зачем это нужно? ✔️ Подготовка к собеседованиям: Учитесь отвечать на вопросы грамотно и уверенно. ✔️ Прокачка навыков: Получите новые знания и улучшите существующие в игровой форме. ✔️ Борьба со стеснением: Практикуйте формулирование мыслей и уверенное ...
Паттерн Наблюдатель в JavaScript. Продвинутый Frontend на реальных примерах
Просмотров 1,7 тыс.6 месяцев назад
Паттерн Наблюдатель в JavaScript. Продвинутый Frontend на реальных примерах
React Разработчик Roadmap 2024. План + Ресурсы для бесплатного изучения.
Просмотров 4,8 тыс.6 месяцев назад
React Разработчик Roadmap 2024. План Ресурсы для бесплатного изучения.
Топ 10 вопросов Middle Frontend по HTML + Разбор
Просмотров 1,5 тыс.6 месяцев назад
Топ 10 вопросов Middle Frontend по HTML Разбор
Топ 10 вопросов Junior Frontend по HTML + Разбор
Просмотров 1,2 тыс.7 месяцев назад
Топ 10 вопросов Junior Frontend по HTML Разбор
Паттерн Стратегия в JavaScript. Продвинутый Frontend на реальных примерах
Просмотров 1,6 тыс.7 месяцев назад
Паттерн Стратегия в JavaScript. Продвинутый Frontend на реальных примерах
Паттерн Стратегия в React. Продвинутый Frontend на реальных примерах
Просмотров 1,4 тыс.7 месяцев назад
Паттерн Стратегия в React. Продвинутый Frontend на реальных примерах
Паттерн Строитель в JavaScript. Продвинутый Frontend на реальных примерах
Просмотров 1,4 тыс.7 месяцев назад
Паттерн Строитель в JavaScript. Продвинутый Frontend на реальных примерах
Паттерн Фабричный метод в JavaScript. Продвинутый Frontend на реальных примерах
Просмотров 1,5 тыс.7 месяцев назад
Паттерн Фабричный метод в JavaScript. Продвинутый Frontend на реальных примерах
Что с IT рынком. Накрутка опыта. Сложно ли пройти собеседование
Просмотров 6 тыс.8 месяцев назад
Что с IT рынком. Накрутка опыта. Сложно ли пройти собеседование
Паттерн Строитель в React. Продвинутый Frontend на реальных примерах
Просмотров 4,2 тыс.8 месяцев назад
Паттерн Строитель в React. Продвинутый Frontend на реальных примерах
Паттерн Фабричный метод в React. Продвинутый Frontend на реальных примерах
Просмотров 4,4 тыс.8 месяцев назад
Паттерн Фабричный метод в React. Продвинутый Frontend на реальных примерах
Паттерны в React. Продвинутый Frontend на реальных примерах
Просмотров 2,3 тыс.8 месяцев назад
Паттерны в React. Продвинутый Frontend на реальных примерах
Frontend Собеседование с разбором. Путь к трудоустройству 2024
Просмотров 37 тыс.8 месяцев назад
Frontend Собеседование с разбором. Путь к трудоустройству 2024
Функции в JavaScript. 30+ концепций в одном видео
Просмотров 2,8 тыс.9 месяцев назад
Функции в JavaScript. 30 концепций в одном видео
Frontend Собеседование. Вопросы + Лайвкодинг. Моковое собеседование
Просмотров 10 тыс.9 месяцев назад
Frontend Собеседование. Вопросы Лайвкодинг. Моковое собеседование
Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения.
Просмотров 13 тыс.10 месяцев назад
Frontend Roadmap 2024. План Ресурсы для бесплатного обучения.
React Новости. React Router, Страница новости. React приложение новостей. [16]
Просмотров 1,5 тыс.11 месяцев назад
React Новости. React Router, Страница новости. React приложение новостей. [16]

Комментарии

  • @parabletraveller9855
    @parabletraveller9855 Час назад

    Не хватило примера с положительной задержкой setTimeout, для визуализации работы webAPI с таким кейсом, за труд спасибо, душевно, достойно 👍

  • @sanmarchen
    @sanmarchen 16 часов назад

    Огромное спасибо, шикарное объяснение!

  • @dafaqtx
    @dafaqtx 17 часов назад

    спасибо! это самое лучшее объяснение на ютубе

  • @voronko100
    @voronko100 19 часов назад

    лайк за труд 👍

  • @reactify-it
    @reactify-it 19 часов назад

    ссылка на схему в Telegram канале

  • @reactify-it
    @reactify-it 19 часов назад

    Telegram канал: t.me/reactify_IT

  • @ТатьянаВербицкая-ш1й
    @ТатьянаВербицкая-ш1й 19 часов назад

    Спасибо! Действительно лучшее объяснение!!!

  • @pratuberance
    @pratuberance 20 часов назад

    Это лучшее объяснение подобных задач, наоборот круто, что объясняешь понятным и простым способом без терминологий.

  • @hazhev
    @hazhev 2 дня назад

    🔥🔥🔥

  • @archichannelarchi7156
    @archichannelarchi7156 3 дня назад

    Руслан, ты красавчик! Спасибо тебе большое за такую отдачу! Материал просто бомба!

  • @НурданАбдиев-м8м
    @НурданАбдиев-м8м 4 дня назад

    Как-будто бы это оверинжениринг

  • @SP-hb6dd
    @SP-hb6dd 5 дней назад

    В задаче с палиндромом есть проще регулярка, чтобы избавиться от лишних символов /\W|_/g. Также стоит знать, что такие регуляки не будут работать с кириллицей и другими алфавитами. Будет круто, если человек знает про юникодовые символьные классы /[^\p{L}\p{N}]/gu

    • @БонгиБонги
      @БонгиБонги 4 дня назад

      Да, но в падлу изучать регулярку + она в работе не пригодится

  • @telepuzik8349
    @telepuzik8349 5 дней назад

    Обязательная галочка на рекламной рассылке? Дядь, иди лесом... Осуждаю 10 раз.

    • @reactify-it
      @reactify-it 4 дня назад

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

  • @AurumCode-17
    @AurumCode-17 5 дней назад

    что думаешь на счет такого варианта - function replaceSubstring (str,search,replace) { const arr = str.split(' ') const findSubstr = arr.indexOf(search) arr[findSubstr] = replace return arr.join(' ') } console.log(replaceSubstring('hello world','world','Tom'))

    • @MaximLisyanskiy
      @MaximLisyanskiy 3 дня назад

      А второй вариант специально не подставил, так как не подходит ?)

  • @ivanmosful
    @ivanmosful 5 дней назад

    Подскажите пожалуйста вот такое решение для палиндрома подходит для собеседования? ``` function isPalindrome(str) { const cleanedStr = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); let start = 0; let end = cleanedStr.length - 1; while (start < end) { if (cleanedStr[start] !== cleanedStr[end]) { return false; } start++; end--; } return true; } ```

  • @ЕвгенийТ-ч8в
    @ЕвгенийТ-ч8в 6 дней назад

    В 4-й проще цикл через while(start) записать. Тогда break не нужен будет.

    • @symasaiti
      @symasaiti 5 дней назад

      while будет проходить на один цикл больше, так как в start будет записываться последний to, а for ограничивает цикл длинной tickets. В данном случае можно вообще if (!start) break; не писать.

  • @reactify-it
    @reactify-it 6 дней назад

    Telegram канал: t.me/reactify_IT

  • @andreiribac6284
    @andreiribac6284 7 дней назад

    Очень жаль что у такого полезного контента так мало просмотров и лайков! Материал супер! Подача супер! Максимально близко к реальной разработке и при этом еще очень доступно для понимания! Низкий поклон от меня за Ваш труд!

  • @MrJettann
    @MrJettann 7 дней назад

    Во второй задаче паршиал не будет же работать на вложенные объекты, можно было бы дииппаршиал сделать

  • @RkKab-v1z
    @RkKab-v1z 7 дней назад

    Очень круто обьясняете👍❤

  • @Sander-o4d
    @Sander-o4d 7 дней назад

    const newItem = ({ item }: Props) => {} Приходится писать вот так: const newItem: FC<Props> = ({ item }) => {}

  • @azatgalyautdinov3548
    @azatgalyautdinov3548 8 дней назад

    Спасибо за полезный контент) сам являюсь разработчиком, но все равно узнал что-то новое

  • @ИгорьИванов-т1ю
    @ИгорьИванов-т1ю 9 дней назад

    индигриенты)

    • @AlexRootx
      @AlexRootx 8 дней назад

      прикольное слово-паразит

  • @-getmen6001
    @-getmen6001 10 дней назад

    Отличный контент! Продолжай в том же духе!

  • @ragnarez9680
    @ragnarez9680 11 дней назад

    зачем нуже файнали если в кече оставили setIsLoading?

  • @ЭмильМахмудов-м5в
    @ЭмильМахмудов-м5в 11 дней назад

    Спасибо огромное, просто нереально ценная информация для начинающего изучать TS!

  • @НиколайСеливанов-и2в

    Спасибо! + в копилку знаний :)

  • @mopttexmop124
    @mopttexmop124 12 дней назад

    Да брат, материал реально супер. Правда за годы работы сложилось ощущение что про это знают только единицы)

    • @reactify-it
      @reactify-it 8 дней назад

      Спасибо! Нужно пользоваться

  • @IamGabimaru
    @IamGabimaru 12 дней назад

    0:19 Принцип единственной отвественности 4:01 Принцип открытости/закрытости 8:30 Принцип Барбары Лисков 12:20 Принцип разделения интерфейса 15:02 Принцип инверсии зависимостей

  • @Logist18
    @Logist18 12 дней назад

    Спасибо за курс! То что надо👍🙌

  • @sanmarchen
    @sanmarchen 12 дней назад

    Огромное спасибо!

    • @reactify-it
      @reactify-it 12 дней назад

      рад стараться!

  • @ЗаурБерсанов-ь5о
    @ЗаурБерсанов-ь5о 13 дней назад

    Идеально

  • @alexgrinberg1888
    @alexgrinberg1888 13 дней назад

    прекрасный обзор четко и понятно на маленьких примерах. Жду прокаченный курс по реакту!

  • @ecaribel
    @ecaribel 13 дней назад

    11:31 Ух ёё, а не проще ли вместо renderHeader в виде функции сделать <Card header={post.title} />, <Card header={user.name} /> ?

    • @_oxios_
      @_oxios_ 13 дней назад

      Проще. Но если тебе нужно текст завернуть в тег и его стилизовать, то такой способ не подходит

    • @reactify-it
      @reactify-it 12 дней назад

      Можно, конечно. Нас ничто не ограничивает. Но если мы хотим влиять на эти части интерфейса то лучше render prop паттерн юзать Можете посмореть видео на канале про паттерны в React

    • @ecaribel
      @ecaribel 12 дней назад

      @@_oxios_ Ну в таком случае да. Но по моему опыту если это какая-то готовая компонента, то чаще всего она принимает просто данные без возможности что-то еще отрендерить, чтобы не ломать UI.

    • @_oxios_
      @_oxios_ 12 дней назад

      @@ecaribel ага, хотелось бы что бы так было всегда :D, взбредет в голову жирным выделить например текст

    • @partefal722
      @partefal722 12 дней назад

      @@reactify-it Ну, единственное, конкретно здесь не понимаю, для чего нужно было передавать функцию, которая возвращает ReactNode, можно было просто React.Node передать и все. header: React.ReactNode;

  • @zam2550
    @zam2550 13 дней назад

    Много сам такого реализовывал, бест практис, очень хорошо на деле показал про SOLID, буду не раз это пособие как визитку и гайд использовать

    • @reactify-it
      @reactify-it 12 дней назад

      Спасибо, приятно!

  • @НиколайСеливанов-и2в

    Спасибо за труд. Отличная подача материала.

  • @reactify-it
    @reactify-it 13 дней назад

    ссылка на репозиторий в Telegram канале

  • @reactify-it
    @reactify-it 13 дней назад

    Telegram канал: t.me/reactify_IT

  • @fedorich1191
    @fedorich1191 13 дней назад

    Большое, человеческое спасибо, за твои труды ! За подробное разъяснение, по гиту, спасибо отдельное )

  • @vladork3032
    @vladork3032 15 дней назад

    14:25 тоже не выглядит хорошей практикой, обычно логику выносят из разметки, например в какой-то .helper.ts. Это плохой код уже получается, читаемость становится проблематичнее, такому паттерну я бы не учил)

  • @vladork3032
    @vladork3032 15 дней назад

    И плиз, добавляй таймкоды, очень любят зрители такое )

  • @vladork3032
    @vladork3032 15 дней назад

    6:00 насколько знаю, через пропы передавать jsx код - весьма плохая практика. Ничего не мешает передавать статику (тот же заголовок/описание), а в самом компоненте превращать уже в заголовок обернутый в теги. Редко такой подход используется, не хотелось бы советовать начинающим, но как пример иконки - пойдет)

  • @terminakter
    @terminakter 15 дней назад

    ну и дроч эти задачи

  • @MrJettann
    @MrJettann 16 дней назад

    А если понадобится добавить какой-то пропс к конкретному компоненту, той же карточке помимо рейтинга ещё что-то, то придется добавлять отдельный пропс в фабрику и все разрастется в огромную помойку, лучше уж compound components использовать если есть набор каких то компонентов схожих, но отличающихся набором свойств

  • @AndranikArshakyan
    @AndranikArshakyan 17 дней назад

    самое бредовое собеседование, не надейтесь с такими знаниями занять нишу Айти

  • @tanercoder1915
    @tanercoder1915 17 дней назад

    С удовольствием с тобой в уме поехал этот задачки

  • @PavelChupryna
    @PavelChupryna 19 дней назад

    Проблема в formatDate. date = 2025-01-16 14:14:42 +0000 формат даты не соответствует стандартному ISO 8601, который требуется для корректного создания объекта Date в JavaScript. Чтобы преобразовать эту строку в объект Date, необходимо сначала привести её к совместимому формату.

  • @andrii9755
    @andrii9755 21 день назад

    Метод slice не мутирующий, он возвращает новый массив, текущий не мутирует при этом

  • @АлександрЕрмолов-п2ь

    Братан, делай таймкоды! 00:00 | вступление 00:17 | Замыкания в js 05:32 | this в функциях 11:33 | чистые функции 13:28 | callback 16:52 | асинхронные функции За видео спасибо! Помогло!

  • @tomato1337.
    @tomato1337. 21 день назад

    Как раз таки для практики данных задач есть очень крутой сайт - Typehero. Рекомендую