- Видео 73
- Просмотров 350 334
Reactify
Добавлен 6 мар 2023
Welcome to Reactify, the go-to resource for web developers looking to master React, Redux, and other cutting-edge JavaScript technologies. Our channel is designed to simplify the complexities of React and make it accessible to all, regardless of experience level. Whether you're a seasoned pro or just starting out in web development, we're here to help you build better UIs, improve your coding skills, and advance your career. Join our community of like-minded developers and let's Reactify the web together!
Разбор задач по Event Loop с собеседований
В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.
Event Loop, JavaScript, стек вызовов, микротаски, макротаски, собеседование, визуализация, разбор задач, JS задачи, асинхронность, Event Loop в JavaScript, микротаски и макротаски, интерпретация кода, 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]
Не хватило примера с положительной задержкой setTimeout, для визуализации работы webAPI с таким кейсом, за труд спасибо, душевно, достойно 👍
Огромное спасибо, шикарное объяснение!
Спасибо!
спасибо! это самое лучшее объяснение на ютубе
спасибо!
лайк за труд 👍
спасибо!
ссылка на схему в Telegram канале
Telegram канал: t.me/reactify_IT
Спасибо! Действительно лучшее объяснение!!!
Спасиб!
Это лучшее объяснение подобных задач, наоборот круто, что объясняешь понятным и простым способом без терминологий.
Спасибо!
🔥🔥🔥
Руслан, ты красавчик! Спасибо тебе большое за такую отдачу! Материал просто бомба!
Как-будто бы это оверинжениринг
В задаче с палиндромом есть проще регулярка, чтобы избавиться от лишних символов /\W|_/g. Также стоит знать, что такие регуляки не будут работать с кириллицей и другими алфавитами. Будет круто, если человек знает про юникодовые символьные классы /[^\p{L}\p{N}]/gu
Да, но в падлу изучать регулярку + она в работе не пригодится
Обязательная галочка на рекламной рассылке? Дядь, иди лесом... Осуждаю 10 раз.
в новой версии не будет, рассылки не делаем, добавили случайно валидацию обязательным полем
что думаешь на счет такого варианта - 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'))
А второй вариант специально не подставил, так как не подходит ?)
Подскажите пожалуйста вот такое решение для палиндрома подходит для собеседования? ``` 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; } ```
В 4-й проще цикл через while(start) записать. Тогда break не нужен будет.
while будет проходить на один цикл больше, так как в start будет записываться последний to, а for ограничивает цикл длинной tickets. В данном случае можно вообще if (!start) break; не писать.
Telegram канал: t.me/reactify_IT
Очень жаль что у такого полезного контента так мало просмотров и лайков! Материал супер! Подача супер! Максимально близко к реальной разработке и при этом еще очень доступно для понимания! Низкий поклон от меня за Ваш труд!
Спасибо!
Во второй задаче паршиал не будет же работать на вложенные объекты, можно было бы дииппаршиал сделать
Очень круто обьясняете👍❤
Спасибо!
const newItem = ({ item }: Props) => {} Приходится писать вот так: const newItem: FC<Props> = ({ item }) => {}
Спасибо за полезный контент) сам являюсь разработчиком, но все равно узнал что-то новое
индигриенты)
прикольное слово-паразит
Отличный контент! Продолжай в том же духе!
Спасибо!
зачем нуже файнали если в кече оставили setIsLoading?
Спасибо огромное, просто нереально ценная информация для начинающего изучать TS!
Спасибо!
Спасибо! + в копилку знаний :)
Да брат, материал реально супер. Правда за годы работы сложилось ощущение что про это знают только единицы)
Спасибо! Нужно пользоваться
0:19 Принцип единственной отвественности 4:01 Принцип открытости/закрытости 8:30 Принцип Барбары Лисков 12:20 Принцип разделения интерфейса 15:02 Принцип инверсии зависимостей
Спасибо!
Спасибо за курс! То что надо👍🙌
Огромное спасибо!
рад стараться!
Идеально
Спасибо!
прекрасный обзор четко и понятно на маленьких примерах. Жду прокаченный курс по реакту!
спасибо!
11:31 Ух ёё, а не проще ли вместо renderHeader в виде функции сделать <Card header={post.title} />, <Card header={user.name} /> ?
Проще. Но если тебе нужно текст завернуть в тег и его стилизовать, то такой способ не подходит
Можно, конечно. Нас ничто не ограничивает. Но если мы хотим влиять на эти части интерфейса то лучше render prop паттерн юзать Можете посмореть видео на канале про паттерны в React
@@_oxios_ Ну в таком случае да. Но по моему опыту если это какая-то готовая компонента, то чаще всего она принимает просто данные без возможности что-то еще отрендерить, чтобы не ломать UI.
@@ecaribel ага, хотелось бы что бы так было всегда :D, взбредет в голову жирным выделить например текст
@@reactify-it Ну, единственное, конкретно здесь не понимаю, для чего нужно было передавать функцию, которая возвращает ReactNode, можно было просто React.Node передать и все. header: React.ReactNode;
Много сам такого реализовывал, бест практис, очень хорошо на деле показал про SOLID, буду не раз это пособие как визитку и гайд использовать
Спасибо, приятно!
Спасибо за труд. Отличная подача материала.
Спасибо!
ссылка на репозиторий в Telegram канале
Telegram канал: t.me/reactify_IT
Большое, человеческое спасибо, за твои труды ! За подробное разъяснение, по гиту, спасибо отдельное )
Спасибо!
14:25 тоже не выглядит хорошей практикой, обычно логику выносят из разметки, например в какой-то .helper.ts. Это плохой код уже получается, читаемость становится проблематичнее, такому паттерну я бы не учил)
И плиз, добавляй таймкоды, очень любят зрители такое )
6:00 насколько знаю, через пропы передавать jsx код - весьма плохая практика. Ничего не мешает передавать статику (тот же заголовок/описание), а в самом компоненте превращать уже в заголовок обернутый в теги. Редко такой подход используется, не хотелось бы советовать начинающим, но как пример иконки - пойдет)
ну и дроч эти задачи
А если понадобится добавить какой-то пропс к конкретному компоненту, той же карточке помимо рейтинга ещё что-то, то придется добавлять отдельный пропс в фабрику и все разрастется в огромную помойку, лучше уж compound components использовать если есть набор каких то компонентов схожих, но отличающихся набором свойств
самое бредовое собеседование, не надейтесь с такими знаниями занять нишу Айти
С удовольствием с тобой в уме поехал этот задачки
Проблема в formatDate. date = 2025-01-16 14:14:42 +0000 формат даты не соответствует стандартному ISO 8601, который требуется для корректного создания объекта Date в JavaScript. Чтобы преобразовать эту строку в объект Date, необходимо сначала привести её к совместимому формату.
Метод slice не мутирующий, он возвращает новый массив, текущий не мутирует при этом
Братан, делай таймкоды! 00:00 | вступление 00:17 | Замыкания в js 05:32 | this в функциях 11:33 | чистые функции 13:28 | callback 16:52 | асинхронные функции За видео спасибо! Помогло!
Как раз таки для практики данных задач есть очень крутой сайт - Typehero. Рекомендую