React Frontend | YeaHub – Telegram
React Frontend | YeaHub
3.37K subscribers
308 photos
4 videos
1 file
530 links
Теория, подготовка к интервью и курсы для React разработчиков

YeaHub — это платформа для IT-специалистов, объединяющая обучение, карьерный рост, развитие и сообщество единомышленников.

Платформа: https://yeahub.ru

Для связи: @ruslan_kuyanets
Download Telegram
Forwarded from YeaHub
[Версия 1.3.0] - Обновление платформы

Мы продолжаем развивать YeaHub, чтобы сделать обучение ещё удобнее, эффективнее и интереснее. В этом обновлении — важные и давно ожидаемые улучшения 👇

🔹 Навыки и ключевые слова из вакансий HH
Мы запустили сервис, который помогает прокачать резюме с помощью популярных навыков и ключевых слов, встречающихся в вакансиях. Это поможет вам выше ранжироваться в поиске среди кандидатов и увеличит конверсию откликов.
https://yeahub.ru/hh-analytics?page=1&mode=skills&specialization=11

🔹 Исправления и улучшения
Мы учли вашу обратную связь: исправили баги, улучшили интерфейс и сделали работу с платформой ещё комфортнее 🧠

🔥 Скоро
1. Сервис Лайвкодинга с реальными задачами с собеседований

👉 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

#release #news #update #yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥71
#Собес #state
🤔 Что произойдет с дочерним компонентом, если поменяется key у родительского компонента?

💬 Кратко:

При изменении key у родительского компонента React интерпретирует это как то, что это совершенно новый компонент. Старый экземпляр компонента и все его дочерние элементы будут полностью размонтированы (вызовутся функции очистки в useEffect), а затем будет смонтирован совершенно новый экземпляр с чистым состоянием. Это мощный инструмент для принудительного сброса состояния компонента.

📌 Полный разбор + примеры использования — на платформе:
👉 Перейти к разбору

📣 Хочешь получать больше таких разборов?
Подпишись на наш главный канал
👍5🔥3
👴🏼 Версии React: не будь стариком

Знаете, я недавно поймал себя на мысли, что большинство курсов и видео по React остаются актуальными даже спустя 4–5 лет. По сути, в реальной работе мы продолжаем использовать базовые концепции, и редко встречается применение действительно новых возможностей библиотеки. Не так уж часто увидишь проект, где активно используют серверные компоненты, useId, хуки для форм вроде useFormStatus, или что-то для конкурентного режима, вроде useTransition. Даже изменения в батчинге, появившиеся в React 18, многим знать не обязательно. А про то, что под капотом давно работает Fiber — многие опытные разработчики слышат об этом впервые.

Как правило, любые видео «о новых возможностях React» сводятся к обзорам с примерами на YouTube, а не настоящему использованию всех этих фич в реальных проектах. Даже ролики, которые громко называют «Практика с React 19», на деле оказываются очередным проектом, написанным привычным способом, без каких-либо новых инструментов.

И вот чтобы не оказаться в ловушке, когда через 3–5 лет вы уже сеньор, а в вакансии внезапно требуют «знание React 18!!», а вы даже не знаете, что такое Fiber, — всё-таки нужно изучать нововведения и стараться применять их в работе. Не насильно, не ради галочки, а там, где это действительно имеет смысл. Но важно хотя бы пощупать каждую новую фичу руками — просто чтобы помнить, что такой инструмент существует, и в нужный момент вы могли бы его использовать.

Я всегда удивлялся вакансиям, где восклицательно пишут «Знание ES6!». А потом понял: есть много специалистов, которые годами сидят на одном проекте и не знают, что существуют стрелочные функции, продолжают писать в старом ООП-стиле, мутируют данные — когда давно уже принято писать в функциональном стиле, с иммутабельностью и современным подходом.

Подборка видео:
1) Пишем todo list на React 19 с нуля!
2) Новые хуки useTransition и useDeferredValue в React 18
3) Новый React 19: 7 изменений.
6👍5🔥1
#Собес #react #javanoscript #typenoscript

🤔 Middle Frontend разработчик в компанию Катюша Принт

HR-скрининг. Зарплатная вилка: от 250к. Весна 2025. Опыт в резюме: 4 года. Формат работы: офис или гибрид.

💬 Вопросы:

- Как защитить данные в LocalStorage от стороннего JS?

- Как работают генераторы в JS?

- В чем различия forEach и map?

- Как работает useReducer и когда его использовать вместо useState или Redux?

- Использовал ли didCatch в React?

👉 Все вопросы из этого собеседования (11)

📣 Хочешь больше собесов?
Подпишись на наш главный канал
3👍1
#Собес #docker_image #dockerfile #container
🤔 Что такое Docker image?

💬 Кратко:

Docker image — это исполнимая и легковесная упаковка, которая включает в себя все необходимые компоненты для запуска приложения, включая код, библиотеки и системные зависимости. Docker image используется для создания контейнеров.

📌 Полный разбор + примеры использования — на платформе:
👉 Перейти к разбору

📣 Хочешь получать больше таких разборов?
Подпишись на наш главный канал
👍3
#podcast #всё
📚 Подкасты Y_LAB

Здесь вы найдете разнообразный IT-контент: от глубоких технических обсуждений до увлекательных и расслабляющих бесед. Наши эпизоды охватывают широкий спектр тем, связанных с разработкой и новейшими технологиями, чтобы каждый разработчик нашел что-то для себя. Присоединяйтесь к нам, чтобы углубить свои знания, оставаться в тренде и вдохновляться новыми идеями!

Перейти к материалу

👉 База вопросов 👉 Новости
🔥2
#Собес #dom
🤔 Можете объяснить концепцию модели документа (DOM)?

💬 Кратко:

Модель документа (DOM) — это представление HTML-документа в виде дерева объектов. Каждая часть документа (теги, атрибуты, текст) представлена как узел в этом дереве, что позволяет разработчикам программно изменять содержимое и структуру страницы с помощью JavaScript. Благодаря DOM можно динамически добавлять, удалять или изменять элементы на веб-странице.

📌 Полный разбор + примеры использования — на платформе:
👉 Перейти к разбору

📣 Хочешь получать больше таких разборов?
Подпишись на наш главный канал
👍3
👩‍💻 Идеальный собес на React-разработчика

Часто думаю о том, какими вообще должны быть собеседования: сколько этапов, сколько времени, что именно они должны проверять и что мы хотим увидеть в кандидате. У меня сформировалось своё мнение.

Как собесы выглядят сейчас?

1. Чистая теория.
Тут всё понятно: вопросы можно заучить, зазубрить до автоматизма — и толку от этого этапа минимум. Проверить реальный уровень сложно.

2. Теория с упором на опыт и рассуждения.
Это уже лучше. Спрашивают не «что такое утечка памяти?», а «сталкивался ли, как решал?». Не «что такое WebSocket?», а «как использовал, какие были проблемы?». Тут хотя бы можно услышать мышление кандидата, а не выученные определения.

3. Алгоритмы и задачи.
Для многих разработчиков это стресс, даже для опытных. Нужна отдельная подготовка, алгоритмы надо специально учить. В итоге — студенты без опыта решают лучше сеньоров. Плюс такие задачи легко списать у нейронки, потому реальную компетенцию они отражают плохо.

4. Вопросы по опыту.
В целом неплохой подход: кандидат рассказывает о задачах, процессах, достижениях. Но это тоже можно подготовить заранее и выдавать заученный текст даже без настоящего опыта.

5. Хардкор-копание в опыт.
Когда идут в глубину, разбирают рабочие кейсы, задают наводящие вопросы, проверяют по мелочам — тут уже не притворишься. Особо если затрагивают что-то рутинное, что знает только человек с реальным опытом: git-кейсы, интерфейс инструментов, реальные проблемы в проекте и т.п.

6. Лайвкодинг.
Сделать запрос, пофиксить баг, отрефакторить код. Лучше, чем алгоритмы, но всё ещё можно улучшить.

Итого: два лучших формата сейчас
— глубокое копание в реальный опыт + нюансы
— лайвкодинг с приближёнными к работе задачами

Но кажется, что можно сделать ещё лучше.

💡 Идея: собес на реальном мини-проекте

За 1.5–2 часа реально понять уровень кандидата, если сделать более «приближённый к бою» формат.

Что делаем?
1. Готовим небольшой проект, похожий на ваш реальный стек и домен.
2. Создаём трекер задач: фичи, баги, настройки инструментов, конфиги eslint и т.д.
3. Добавляем документацию и гайдлайн по стилю.
4. Кандидат ориентируется в проекте, читает доку, смотрит структуру, разбирается в задачах и процессе работы с ветками.
5. Он берёт любую задачу, оценивает сложность, начинает решать, задаёт вопросы, изучает ТЗ, ищет баги.
6. Можно пользоваться интернетом.
7. Кандидат работает с экраншарингом.

Важно: проект должен быть не «один файл», а со средней структурой — страницы, компоненты, хелперы. Тогда нейронка мало поможет: слишком много контекста. Нужно читать код, разбираться в ТЗ, проверять результат в браузере.

Что это даёт?

Такой собес отлично показывает ход мыслей и реальную квалификацию. Один двухчасовой этап заменяет несколько технических. Параллельно можно ненавязчиво обсуждать опыт, подходы и немного теории.

Минусы
— Тяжелее готовить новые задачи — их могут «разгадать» предыдущие кандидаты.
— Сразу нужно уделить ~2 часа времени. Но это компенсируется тем, что можно остановить собес в первые 15–20 минут, если видно, что кандидат не тянет.

Почему идея кажется логичной?
— Уменьшается конкуренция: сложнее готовиться
— Если человек справился с такой задачей — уже не важно, настоящий у него опыт или нет. Он ориентируется в коде и показывает результат.

Почему такие собесы до сих пор не распространены?

Похоже, многим компаниям просто комфортно в текущей системе. Или им действительно всё равно — лишь бы нанять кого-то «достаточного».

💪 Если хотите обсудить — присоединяйтесь в наш бесплатный чатик Frontend Элита: https://news.1rj.ru/str/+TCFPcrZTS9YwZDli
Please open Telegram to view this post
VIEW IN TELEGRAM
4👎1
#Собес #list #key #react

🤔 Middle+ Frontend разработчик в компанию Лига цифровой экономики

Техническое собеседование. Лето 2025. Вилка 200-220k. Опыт кандидата — 4 года. Лайвкод: реализация функции Фибоначчи + оптимизация по памяти до O(1), аутстаф в Сбер

💬 Вопросы:

- Какие существуют методы оптимизации производительности рендеринга HTML, такие как минимизация перерисовок и рефлоу?

- Чем отличается strict mode от нестрогого режима

- this — как определяется и чем отличается в strict mode

- Event Loop, что и когда выводится в консоль

- Отличие анимации при использовании requestAnimationFrame и SetInterval

👉 Все вопросы из этого собеседования (26)

📣 Хочешь больше собесов?
Подпишись на наш главный канал
2
#Собес #http #protocol
🤔 Какие этапы происходят после ввода URL в браузере?

💬 Кратко:

Когда вы вводите URL в браузере, сначала происходит поиск IP-адреса через DNS-систему. Затем браузер устанавливает соединение с сервером и отправляет HTTP-запрос. Сервер обрабатывает запрос и возвращает HTML-страницу с ресурсами. Браузер анализирует полученные данные, строит дерево элементов и отображает готовую страницу на экране.

📌 Полный разбор + примеры использования — на платформе:
👉 Перейти к разбору

📣 Хочешь получать больше таких разборов?
Подпишись на наш главный канал
👍4
#book #react #веб
📚 React. К вершинам мастерства: Создание быстрых, производительных и интуитивно понятных веб-приложений

Это практическое руководство по разработке веб‑интерфейсов и веб‑приложений с использованием React — популярной библиотеки JavaScript для создания пользовательских интерфейсов. Книга сочетает фундаментальные концепции с продвинутыми техниками, помогая читателю перейти от базового понимания к профессиональному владению инструментом.

Перейти к материалу

👉 База вопросов 👉 Новости
👍61
#Собес #lazy #optimization
🤔 Как сделать так, чтобы картинка подгружалась с сервера только тогда, когда пользователь до нее долистал?

💬 Кратко:

Используют ленивую загрузку (lazy loading). Для этого добавляют атрибут loading="lazy" в <img> или используют Intersection Observer в JavaScript.

📌 Полный разбор + примеры использования — на платформе:
👉 Перейти к разбору

📣 Хочешь получать больше таких разборов?
Подпишись на наш главный канал
2👍1