Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

Frontend | Вопросы собесов

Open in Telegram

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads

Network: easyofferRussia37 894Technologies & Applications7 507...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 287 subscribers, ranking 7 507 in the Technologies & Applications category and 37 894 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 287 subscribers.

According to the latest data from 09 November, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -314 over the last 30 days and by -15 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 6.11%. Within the first 24 hours after publication, content typically collects 4.48% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 056 views. Within the first day, a publication typically gains 774 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Thanks to the high frequency of updates (latest data received on 10 November, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

17 287

Subscribers

-1524 hours

-797 days

-31430 days

1 056

Post views

~ 77424 hours

~ 89848 hours

6.11%

Engagement rate

~ 2

Posts per day

Ads index

Posts Archive

\n\n\n\nВ этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала \"Child clicked!\", затем \"Parent clicked!\". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent.\n\nУправление всплытием\n\nИногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().\n\n\nТеперь, если вы кликнете на элемент #child, вы увидите только алерт \"Child clicked!\", так как всплытие события было остановлено.\n\nЗахват событий\n\nПомимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие).\n\nЧтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:\n\n\nВсплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation().\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-10T09:10:11Z","dateModified":"2024-07-10T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5462},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":27},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":46},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/311","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/311","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/311","headline":"Почему тебя не зовут на интервью? Исправь это в своем резюме… Получить приглашение на интервью сейчас сложнее…","articleBody":"Почему тебя не зовут на интервью? Исправь это в своем резюме…\n\nПолучить приглашение на интервью сейчас сложнее, чем с нуля обучиться разработке. И к сожалению, это не шутка.\n\nСкорее всего только 1-2% работодателей сейчас позовут тебя на интервью. Это статистика, которую мы собирали по 10.000 откликам. Но над этой цифрой можно и нужно работать.\n\nЕсли правильно оформить свое резюме, и поменять свою стратегию с откликами, то конверсию можно увеличить до 10%. Т.е почти в 10 раз!\n\nКак это сделать?\n\n1. Проверить свое резюме по нашему чек листу, и внести в него то, чего будет не хватать.\n\n2. Поменять свой подход к поиску работы, ведь одними откликами на hh.ru сыт не будешь.\n\n16 июля, в 18:00 по москве, мы вместе с Максом из CodeReview проведем вебинар на тему эффективного поиска работы в 2024 году.\n\nНа нем Макс покажет как сейчас нужно искать работу. В прямом эфире. \n\nА также раскроет что именно нужно писать в свое резюме, чтобы оно ПРОДАВАЛО.\n\nПолучить чек лист по составлению резюме, а также зарегистрироваться на вебинар можно по этой ссылке.\n\nРегистрируйся сейчас и увидимся 16 июля, в 18:00 по мск.\n\n👉 Зарегистрироваться и получить чек-лист по резюме.","datePublished":"2024-07-10T07:00:22Z","dateModified":"2024-07-12T06:57:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3521},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/310","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/310","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/310","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-09T16:10:08Z","dateModified":"2024-08-23T17:12:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5612},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/309","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/309","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/309","headline":"В чем преимущество методологии bem ? Спросят с вероятностью 7% Методология БЭМ (Блок, Элемент, Модификатор) —…","articleBody":"В чем преимущество методологии bem ?\nСпросят с вероятностью 7%\n\nМетодология БЭМ (Блок, Элемент, Модификатор) — это подход к написанию и организации CSS кода, который помогает создавать масштабируемые и поддерживаемые интерфейсы. Основные преимущества методологии:\n\n1️⃣Четкая структура и семантика\n\nБЭМ обеспечивает ясную и логичную структуру именования классов, что делает код более читаемым и понятным. Это особенно полезно в больших проектах.\n

\n Click me\n

\n\n2️⃣button — блок\n✅button__text — элемент\n✅button--primary — модификатор\n\n2️⃣Изоляция компонентов\n\nБлоки в БЭМ независимы и изолированы друг от друга, что предотвращает проблемы с каскадностью и неожиданным переопределением стилей.\n\n\n\n\nКлассы .header__logo и .footer__logo не пересекаются и не влияют друг на друга.\n\n3️⃣Легкость в переиспользовании\n\nБлоки можно легко переиспользовать в разных частях проекта или даже в разных проектах без изменения их стилей.\n

Title

Content

\n\n

Profile Title

Profile Content

\n\n4️⃣Удобство в поддержке и масштабировании\n\nБлагодаря четкой структуре и изоляции, код написанный по БЭМ легче поддерживать и масштабировать. Добавление новых компонентов или модификация существующих не вызывает каскадных изменений в других частях системы.\n\n5️⃣Унификация стилей\n\nМетодология БЭМ способствует унификации и стандартизации стилей, что упрощает работу с проектом и делает его более предсказуемым.\n\nПример\nHTML:\n\n\nCSS:\n.menu {\n background-color: #fff;\n border: 1px solid #ccc;\n}\n\n.menu__item {\n padding: 10px;\n color: #333;\n}\n\n.menu__item--active {\n background-color: #007bff;\n color: #fff;\n}\n\nМетодология БЭМ упрощает чтение, поддержку и масштабирование кода за счет четкой структуры, изоляции компонентов и унификации стилей. Она делает интерфейсы более предсказуемыми и удобными для работы в команде.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-09T09:10:07Z","dateModified":"2024-07-09T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":23,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5908},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":57},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":23}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/308","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/308","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/308","headline":"Привет! Ты сейчас ищешь работу? Если да, то у меня для тебя классные новости. Мы с Максом решили провести веб…","articleBody":"Привет! Ты сейчас ищешь работу?\n\nЕсли да, то у меня для тебя классные новости.\n\nМы с Максом решили провести вебинар на тему поиска работы и того, как быстрее получить оффер.\n\nЗачем?\n\nДа потому что найти работу просто откликаясь на вакансии теперь практически нереально.\n\nНа Junior вакансии откликаются по 1500 кандидатов. 1500 человек, Карл... \n\nВопрос: Как искать работу в таких условиях?\nОтвет: Нужно менять подходы, и использовать новые способы поиска работы.\n\nА вот какие способы, и как искать работу в 2024 году, расскажет мой товарищ - Макс, который помогает разработчикам с трудоустройством.\n\nОн расскажет тебе как ПРАВИЛЬНО откликаться на вакансии, на что смотрят рекрутеры, и как ты должен быть упакован, чтобы получить работу в это непростое время.\n\n🗓 Когда? Во вторник – 16 июля, в 18:00 по мск.\n\n🎁 После регистрации он также обещал прислать: 1) Анализ рынка труда. 2) Разбор кейсов тех, кто сейчас находит работу. 3) Пошаговый план, что нужно делать, чтобы прийти к оферу.\n\n👉 Записаться на вебинар по поиску работы.","datePublished":"2024-07-09T07:00:18Z","dateModified":"2024-07-11T07:00:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3651},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/307","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/307","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/307","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-08T16:10:09Z","dateModified":"2024-07-08T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5740},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/306","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/306","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/306","headline":"Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мир…","articleBody":"Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мира, не задумываясь о проблемах с оплатой. \n\nCheatPay помогает оплатить любые зарубежные сервисы российскими картами, а также помогает перевести средства за границу или получить средства из других стран. \n\nНапример:\n- Потеряли доступ к Zoom, Chat GPT, Airtable, Atlassian, Canva Midjourney, Figma, Notion, Hetzner и к другим программам? \n\n- Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects, или другие? \nВам помогут!\n\nCheatPay — это надежный, удобный и быстрый сервис оплаты, с множеством положительных отзывов.\n\n📌Возможна оплата на ИП и кредитной картой 💳\n\nПодписывайтесь на канал сервиса CheatPay, чтобы не потерять его.","datePublished":"2024-07-08T14:00:10Z","dateModified":"2024-07-10T14:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3857},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/305","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/305","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/305","headline":"Что такое схлопывание границ ? Спросят с вероятностью 7% Схлопывание границ (или схлопывание отступов, margin…","articleBody":"Что такое схлопывание границ ?\nСпросят с вероятностью 7%\n\nСхлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление.\n\nОсновные правила\n\n1️⃣Смежные вертикальные отступы:\nКогда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.\n

\n\nВ данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px.\n\n2️⃣Родитель и первый/последний дочерний элемент:\nЕсли первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.\n

\n\nВ этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя.\n\n3️⃣Пустые блоки:\nЕсли блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться.\n\nПримеры\n\nСхлопывание между соседними элементами\n

Box 1

Box 2

\n\nИтоговый отступ между .box1 и .box2 будет 30px.\n\nСхлопывание границ родителя и первого/последнего дочернего элемента\n

Content

\n\nИтоговый верхний отступ для .content будет 25px, так как отступы схлопываются.\n\nИсключения и предотвращение схлопывания\n\n✅Границы или внутренние отступы:\nЕсли между элементами добавить границу или внутренний отступ, схлопывания не произойдет.\n .parent {\n padding-top: 1px;\n }\n \n\n✅Flexbox и Grid:\nЭлементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы.\n\n✅Блоки с overflow: hidden, position: absolute, или display: inline-block:\nТакие блоки не участвуют в схлопывании отступов.\n\nСхлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-08T09:10:08Z","dateModified":"2024-07-08T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5919},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":33},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/304","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/304","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/304","headline":"Как джуну без опыта составить себе крутое резюме? Просто скачай наш гайд с 5 примерами реальных резюмешек реб…","articleBody":"Как джуну без опыта составить себе крутое резюме?\n\nПросто скачай наш гайд с 5 примерами реальных резюмешек ребят, которые недавно нашли работу.\n\nВ этом гайде рассказали как:\n\n1. Оформить свой опыт, даже если его нет.\n2. Добавили 5 крутых примеров настоящих резюме junior разработчиков без опыта, которые нашли работу.\n\nА писала этот гайд команда, которая трудоустроила уже больше 150 джунов!\n\nМеняем его на подписку на канал 😊\n\n👉 Скачать можно бесплатно по этой ссылочке.","datePublished":"2024-07-08T07:00:14Z","dateModified":"2024-07-10T12:17:17Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3668},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":40}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/303","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/303","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/303","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-07T16:10:09Z","dateModified":"2024-07-07T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":11,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5742},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":11}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/302","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/302","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/302","headline":"Что такое usecontext ? Спросят с вероятностью 7% useContext — это один из встроенных хуков, который позволяет…","articleBody":"Что такое usecontext ?\nСпросят с вероятностью 7%\n\nuseContext — это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.\n\nКак он работает\n\n1️⃣Создание контекста\n\nДля создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.\n import React, { createContext, useState } from 'react';\n\n const MyContext = createContext();\n \n\n2️⃣Provider\n\nКомпонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.\n const MyProvider = ({ children }) => {\n const [state, setState] = useState('Hello World');\n\n return (\n \n {children}\n \n );\n };\n \n\n3️⃣useContext\n\nИспользуется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.\n import React, { useContext } from 'react';\n\n const MyComponent = () => {\n const { state, setState } = useContext(MyContext);\n\n return (\n

{state}

\n \n

\n );\n };\n \n\nПолный пример\nimport React, { createContext, useState, useContext } from 'react';\n\n// Создание контекста\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n const [state, setState] = useState('Hello World');\n\n return (\n \n {children}\n \n );\n};\n\nconst MyComponent = () => {\n const { state, setState } = useContext(MyContext);\n\n return (\n

{state}

\n \n

\n );\n};\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\nuseContext — это хук, который позволяет компонентам получать данные из контекста. Он используется для доступа к глобальным данным без необходимости передавать пропсы на каждом уровне компонента.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-07T09:10:07Z","dateModified":"2024-07-07T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5817},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":35},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}}]}

17 289

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

17 289

Зачем нужна функция iife ? Спросят с вероятностью 7% IIFE (Immediately Invoked Function Expression) — это функция, которая определяется и вызывается немедленно после ее создания. IIFE полезны по нескольким причинам: Основные преимущества 1️⃣Изоляция кода: Создают новую область видимости, что помогает избежать загрязнения глобального пространства имен. Это особенно полезно при работе с переменными, которые могут конфликтовать с другими частями кода. 2️⃣Создание приватных переменных: Переменные, объявленные внутри IIFE, не доступны снаружи, что делает их приватными. Это помогает защитить данные и функции от нежелательного доступа или модификации. 3️⃣Предотвращение конфликтов переменных: Поскольку IIFE создают собственную область видимости, переменные внутри них не конфликтуют с переменными в других частях программы. 4️⃣Инициализация кода: IIFE часто используются для выполнения однократной инициализации, которая должна произойти сразу после загрузки кода. Синтаксис IIFE Может быть объявлена с помощью двух основных синтаксисов: 1️⃣Анонимная функция

(function() {
  console.log('This is an IIFE');
})();

2️⃣Функция с именем

(function namedIIFE() {
  console.log('This is a named IIFE');
})();

Примеры 1️⃣Изоляция переменных

var i = 10;

(function() {
  var i = 20;
  console.log(i); // 20
})();

console.log(i); // 10

В этом примере переменная i внутри IIFE не конфликтует с переменной i в глобальной области видимости. 2️⃣Создание приватных переменных

var counter = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
      return count;
    },
    reset: function() {
      count = 0;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
counter.reset();
console.log(counter.increment()); // 1

Здесь переменная count является приватной и доступна только через методы increment и reset. 3️⃣Инициализация кода

(function() {
  console.log('IIFE for initialization');
  // Initialization code here
})();

IIFE нужны для создания новой области видимости, изоляции кода, создания приватных переменных и предотвращения конфликтов переменных. Они выполняются сразу после объявления и часто используются для инициализации кода. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 289

Техническая поддержка и доработка сайтов "под ключ" Обновление, доработка и развитие сайтов. Любая CMS и сложность. Гарантия! ✅ Выгодные цены ✅ Сертифицированные специалисты ✅ Полная безопасность ✅ Опыт 14 лет Мы делаем быстрые, красивые и фунциональные сайты 👌 Узнать больше #реклама ivit.pro О рекламодателе

17 289

🤔 Какой атрибут для `` определяет, что поле должно быть заполнено перед отправкой формы?

Anonymous voting

17 289

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 1789ГБ: Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready

17 289

Что такое ssr ? Спросят с вероятностью 7% SSR (Server-Side Rendering) — это технология рендеринга веб-страниц на сервере, а не на клиенте. В контексте современных JavaScript-фреймворков, таких как React или Vue.js, это означает, что HTML-код страницы генерируется на сервере и отправляется в браузер уже готовым для отображения. Это отличается от традиционного подхода клиентского рендеринга (Client-Side Rendering, CSR), где HTML генерируется непосредственно в браузере с использованием JavaScript. Основные особенности и преимущества 1️⃣Улучшение производительности и скорости загрузки: ✅Первичный контент: Поскольку HTML генерируется на сервере, браузеры могут отображать готовый контент без необходимости ждать загрузки и выполнения JavaScript. ✅SEO: Поисковые системы лучше индексируют страницы, так как весь контент доступен сразу. 2️⃣Лучшая поддержка SEO: ✅Статические HTML-страницы, генерируемые сервером, легче индексируются поисковыми системами, что улучшает видимость сайта в поисковых результатах. 3️⃣Улучшенное восприятие пользователем (First Paint): ✅Пользователи видят контент быстрее, так как сервер отправляет уже готовую HTML-разметку. Как он работает 1️⃣Запрос от клиента: ✅Браузер отправляет запрос на сервер для получения страницы. 2️⃣Генерация HTML на сервере: ✅Сервер запускает JavaScript-код для рендеринга компонента или всей страницы. ✅Сервер генерирует HTML-код и отправляет его клиенту. 3️⃣Отображение страницы в браузере: ✅Браузер получает готовую HTML-страницу и отображает её. ✅Затем JavaScript-фреймворк (например, React или Vue) «гидрирует» страницу, то есть связывает готовую HTML-разметку с JavaScript-кодом, чтобы сделать страницу интерактивной. Next.js — популярный фреймворк для React, который поддерживает SSR из коробки. 1️⃣Установка Next.js:

      npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev

2️⃣Создание страницы с SSR:

      // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;

В этом примере Next.js использует функцию getServerSideProps для получения данных на сервере перед рендерингом страницы. Эти данные затем передаются в компонент как пропсы и используются для генерации HTML. SSR (Server-Side Rendering) — это процесс рендеринга веб-страниц на сервере, а не в браузере. Это улучшает производительность, SEO и восприятие пользователем за счет отправки готового HTML-кода с сервера. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 289

🤔 Какой HTML5 API предназначен для хранения данных в браузере, даже после закрытия вкладки?

Anonymous voting

17 289

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

17 289

Repost from easyoffer

Канал приближается к 20к подписчиков, а здесь так и нет нормального контент плана 😒 Ищу талантливых журналистов, способных писать клевые и авторские посты на тему "Карьера в IT" и все что с этим связано: поиск работы, повышение з/п, разбор кейсов, переезд в другие страны по рабочим визам, аналитика, исследование рынка и т.д. Важно глубокое понимание IT индустрии, вы должны иметь опыт работы в ней Если интересно отправьте мне свое резюме @kivaiko

17 289

Что такое всплытие ? Спросят с вероятностью 7% Всплытие (или бабблинг, event bubbling) — это механизм обработки событий в веб-разработке, при котором событие, происходящее на одном элементе, сначала обрабатывается этим элементом, а затем последовательно передаётся (всплывает) вверх по дереву DOM к его родительским элементам вплоть до корневого элемента (обычно document). Как работает всплытие событий Когда это происходит на элементе, сначала выполняются обработчики, прикрепленные к самому элементу, затем к его родителю, потом к родителю родителя, и так далее до document. Рассмотрим пример с вложенными элементами и обработчиками событий:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', () => {
      alert('Parent clicked!');
    });

    document.getElementById('child').addEventListener('click', () => {
      alert('Child clicked!');
    });
  </script>
</body>
</html>

В этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала "Child clicked!", затем "Parent clicked!". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent. Управление всплытием Иногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  });

  document.getElementById('child').addEventListener('click', (event) => {
    alert('Child clicked!');
    event.stopPropagation(); // предотвращает всплытие события
  });
</script>

Теперь, если вы кликнете на элемент #child, вы увидите только алерт "Child clicked!", так как всплытие события было остановлено. Захват событий Помимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие). Чтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    alert('Child clicked!');
  }, true);
</script>

Всплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation(). 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 289

Почему тебя не зовут на интервью? Исправь это в своем резюме… Получить приглашение на интервью сейчас сложнее, чем с нуля обучиться разработке. И к сожалению, это не шутка. Скорее всего только 1-2% работодателей сейчас позовут тебя на интервью. Это статистика, которую мы собирали по 10.000 откликам. Но над этой цифрой можно и нужно работать. Если правильно оформить свое резюме, и поменять свою стратегию с откликами, то конверсию можно увеличить до 10%. Т.е почти в 10 раз! Как это сделать? 1. Проверить свое резюме по нашему чек листу, и внести в него то, чего будет не хватать. 2. Поменять свой подход к поиску работы, ведь одними откликами на hh.ru сыт не будешь. 16 июля, в 18:00 по москве, мы вместе с Максом из CodeReview проведем вебинар на тему эффективного поиска работы в 2024 году. На нем Макс покажет как сейчас нужно искать работу. В прямом эфире. А также раскроет что именно нужно писать в свое резюме, чтобы оно ПРОДАВАЛО. Получить чек лист по составлению резюме, а также зарегистрироваться на вебинар можно по этой ссылке. Регистрируйся сейчас и увидимся 16 июля, в 18:00 по мск. 👉 Зарегистрироваться и получить чек-лист по резюме.

17 289

🤔 Какое CSS-свойство определяет пространство между границей и содержимым элемента?

Anonymous voting

17 289

В чем преимущество методологии bem ? Спросят с вероятностью 7% Методология БЭМ (Блок, Элемент, Модификатор) — это подход к написанию и организации CSS кода, который помогает создавать масштабируемые и поддерживаемые интерфейсы. Основные преимущества методологии: 1️⃣Четкая структура и семантика БЭМ обеспечивает ясную и логичную структуру именования классов, что делает код более читаемым и понятным. Это особенно полезно в больших проектах.

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

2️⃣button — блок ✅button__text — элемент ✅button--primary — модификатор 2️⃣Изоляция компонентов Блоки в БЭМ независимы и изолированы друг от друга, что предотвращает проблемы с каскадностью и неожиданным переопределением стилей.

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav"></div>
</div>

<div class="footer">
  <div class="footer__logo"></div>
</div>

Классы .header__logo и .footer__logo не пересекаются и не влияют друг на друга. 3️⃣Легкость в переиспользовании Блоки можно легко переиспользовать в разных частях проекта или даже в разных проектах без изменения их стилей.

<div class="card">
  <div class="card__title">Title</div>
  <div class="card__content">Content</div>
</div>

<div class="profile">
  <div class="card">
    <div class="card__title">Profile Title</div>
    <div class="card__content">Profile Content</div>
  </div>
</div>

4️⃣Удобство в поддержке и масштабировании Благодаря четкой структуре и изоляции, код написанный по БЭМ легче поддерживать и масштабировать. Добавление новых компонентов или модификация существующих не вызывает каскадных изменений в других частях системы. 5️⃣Унификация стилей Методология БЭМ способствует унификации и стандартизации стилей, что упрощает работу с проектом и делает его более предсказуемым. Пример HTML:

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

CSS:

.menu {
  background-color: #fff;
  border: 1px solid #ccc;
}

.menu__item {
  padding: 10px;
  color: #333;
}

.menu__item--active {
  background-color: #007bff;
  color: #fff;
}

Методология БЭМ упрощает чтение, поддержку и масштабирование кода за счет четкой структуры, изоляции компонентов и унификации стилей. Она делает интерфейсы более предсказуемыми и удобными для работы в команде. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 289

Привет! Ты сейчас ищешь работу? Если да, то у меня для тебя классные новости. Мы с Максом решили провести вебинар на тему поиска работы и того, как быстрее получить оффер. Зачем? Да потому что найти работу просто откликаясь на вакансии теперь практически нереально. На Junior вакансии откликаются по 1500 кандидатов. 1500 человек, Карл... Вопрос: Как искать работу в таких условиях? Ответ: Нужно менять подходы, и использовать новые способы поиска работы. А вот какие способы, и как искать работу в 2024 году, расскажет мой товарищ - Макс, который помогает разработчикам с трудоустройством. Он расскажет тебе как ПРАВИЛЬНО откликаться на вакансии, на что смотрят рекрутеры, и как ты должен быть упакован, чтобы получить работу в это непростое время. 🗓 Когда? Во вторник – 16 июля, в 18:00 по мск. 🎁 После регистрации он также обещал прислать: 1) Анализ рынка труда. 2) Разбор кейсов тех, кто сейчас находит работу. 3) Пошаговый план, что нужно делать, чтобы прийти к оферу. 👉 Записаться на вебинар по поиску работы.

17 289

🤔 Какой тег HTML используется для встраивания исполняемого кода написанного на JavaScript?

Anonymous voting

17 289

Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мира, не задумываясь о проблемах с оплатой. CheatPay помогает оплатить любые зарубежные сервисы российскими картами, а также помогает перевести средства за границу или получить средства из других стран. Например: - Потеряли доступ к Zoom, Chat GPT, Airtable, Atlassian, Canva Midjourney, Figma, Notion, Hetzner и к другим программам? - Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects, или другие? Вам помогут! CheatPay — это надежный, удобный и быстрый сервис оплаты, с множеством положительных отзывов. 📌Возможна оплата на ИП и кредитной картой 💳 Подписывайтесь на канал сервиса CheatPay, чтобы не потерять его.

17 289

Что такое схлопывание границ ? Спросят с вероятностью 7% Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление. Основные правила 1️⃣Смежные вертикальные отступы: Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.

      <div class="block1"></div>
   <div class="block2"></div>

В данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px. 2️⃣Родитель и первый/последний дочерний элемент: Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.

      <div class="parent">
     <div class="child"></div>
   </div>

В этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя. 3️⃣Пустые блоки: Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться. Примеры Схлопывание между соседними элементами

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Итоговый отступ между .box1 и .box2 будет 30px. Схлопывание границ родителя и первого/последнего дочернего элемента

<div class="container">
  <div class="content">Content</div>
</div>

Итоговый верхний отступ для .content будет 25px, так как отступы схлопываются. Исключения и предотвращение схлопывания ✅Границы или внутренние отступы: Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.

    .parent {
    padding-top: 1px;
  }

✅Flexbox и Grid: Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы. ✅Блоки с overflow: hidden, position: absolute, или display: inline-block: Такие блоки не участвуют в схлопывании отступов. Схлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 289

Как джуну без опыта составить себе крутое резюме? Просто скачай наш гайд с 5 примерами реальных резюмешек ребят, которые недавно нашли работу. В этом гайде рассказали как: 1. Оформить свой опыт, даже если его нет. 2. Добавили 5 крутых примеров настоящих резюме junior разработчиков без опыта, которые нашли работу. А писала этот гайд команда, которая трудоустроила уже больше 150 джунов! Меняем его на подписку на канал 😊 👉 Скачать можно бесплатно по этой ссылочке.

17 289

🤔 Какой метод массива в JavaScript применяется для преобразования всех элементов массива и создания нового массива?

Anonymous voting

17 289

Что такое usecontext ? Спросят с вероятностью 7% useContext — это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации. Как он работает 1️⃣Создание контекста Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

      import React, { createContext, useState } from 'react';

   const MyContext = createContext();

2️⃣Provider Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };

3️⃣useContext Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

useContext — это хук, который позволяет компонентам получать данные из контекста. Он используется для доступа к глобальным данным без необходимости передавать пропсы на каждом уровне компонента. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых