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

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

Kanalga Telegram’da o‘tish

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

Ko'proq ko'rsatish
easyofferTarmoq:easyofferRossiya36 945Texnologiyalar & Aralashmalar7 153

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 728 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 153-o'rinni va Rossiya mintaqasida 36 945-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 17 728 obunachiga ega bo‘ldi.

15 Sentabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -229 ga, so‘nggi 24 soatda esa -9 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

  • Tasdiqlash holati: Tasdiqlanmagan
  • Jalb etish (ER): Auditoriya o‘rtacha 5.95% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.54% ini tashkil etuvchi reaksiyalarni to‘playdi.
  • Post qamrovi: Har bir post o‘rtacha 1 054 marta ko‘riladi; birinchi sutkada odatda 804 ta ko‘rish yig‘iladi.
  • Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
  • Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 16 Sentabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

17 728
Obunachilar
-924 soatlar
-457 kun
-22930 kun

Ma'lumot yuklanmoqda...

O'xshash kanallar
React Job | JavaScript | Вакансии
16.1K
React Job | JavaScript | Вакансии
Frontend Interview - собеседования по Javascript / Html / Css
10.5K
Frontend Interview - собеседования по Javascript / Html / Css
HTML Academy
9.6K
HTML Academy
Javascript jobs — вакансии по фронтенду, джаваскрипт, React, Angular, Vue
9.5K
Javascript jobs — вакансии по фронтенду, джаваскрипт, React, Angular, Vue
progway — программирование, IT
2.6K
progway — программирование, IT
avatar
1
Ko'proq kanallar
Taglar buluti
ставь82
браузер56
html46
border35
flex34
javascript32
await26
css26
строка22
dom21
async20
div20
false19
radius17
url17
tostring16
тег16
контекст15
input14
загрузка14
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Sentabr '26
Sentabr '26
+5
0 kanalda
Avgust '26
+28
0 kanalda
Get PRO
Iyul '26
+29
0 kanalda
Get PRO
Iyun '26
+26
2 kanalda
Get PRO
May '26
+41
0 kanalda
Get PRO
Aprel '26
+28
0 kanalda
Get PRO
Mart '26
+28
0 kanalda
Get PRO
Fevral '26
+42
0 kanalda
Get PRO
Yanvar '26
+97
1 kanalda
Get PRO
Dekabr '25
+15
2 kanalda
Get PRO
Noyabr '25
+120
0 kanalda
Get PRO
Oktabr '25
+89
0 kanalda
Get PRO
Sentabr '25
+55
0 kanalda
Get PRO
Avgust '25
+65
0 kanalda
Get PRO
Iyul '25
+98
0 kanalda
Get PRO
Iyun '25
+103
2 kanalda
Get PRO
May '25
+121
2 kanalda
Get PRO
Aprel '25
+171
0 kanalda
Get PRO
Mart '25
+162
5 kanalda
Get PRO
Fevral '25
+359
5 kanalda
Get PRO
Yanvar '25
+531
53 kanalda
Get PRO
Dekabr '24
+285
1 kanalda
Get PRO
Noyabr '24
+539
0 kanalda
Get PRO
Oktabr '24
+1 456
46 kanalda
Get PRO
Sentabr '24
+2 372
275 kanalda
Get PRO
Avgust '24
+742
0 kanalda
Get PRO
Iyul '24
+855
54 kanalda
Get PRO
Iyun '24
+3 780
245 kanalda
Get PRO
May '24
+3 174
224 kanalda
Get PRO
Aprel '24
+2 890
69 kanalda
Get PRO
Mart '24
+2 687
48 kanalda
Get PRO
Fevral '24
+3 294
32 kanalda
Sana
Obunachilarni jalb qilish
Esdaliklar
Kanallar
15 Sentabr+1
14 Sentabr0
13 Sentabr0
12 Sentabr0
11 Sentabr0
10 Sentabr0
09 Sentabr+2
08 Sentabr+2
07 Sentabr0
06 Sentabr0
05 Sentabr0
04 Sentabr0
03 Sentabr0
02 Sentabr0
01 Sentabr0
Kanal postlari
Frontend | Вопросы собесов
Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве.
Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

2
🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения # Базовый образ с Node.js FROM node:18 # Устанавливаем рабочую директорию WORKDIR /app # Копируем файлы проекта COPY package.json ./ RUN npm install COPY . . # Запускаем приложение CMD ["node", "server.js"] Собираем образ Docker (создаем "упакованный" контейнер) docker build -t my-app . Запускаем контейнер docker run -p 3000:3000 my-app Ставь 👍 и забирай 📚 Базу знаний
703
3
Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в
Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в американскую компанию 👆Это недавние результаты участников нашего комьюнити. Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум! В нашем канале много ценного для разработчиков по подготовке к собесам👇 Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Как я прохожу собесы: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFHZ918m ИП Галактионов Тихон Витальевич, ИНН 771618975809
759
4
ЖК Символ. До 30.09: лоты от 18,5 млн/₽ со скидкой 12% ❤️Скидки 12% в готовом для жизни квартале у центра Москвы. Комфортная
ЖК Символ. До 30.09: лоты от 18,5 млн/₽ со скидкой 12% ❤️Скидки 12% в готовом для жизни квартале у центра Москвы. Комфортная рассрочка от застройщика всего 180 тыс/₽ в месяц. 🎓На территории парк 10 га и 150+ открытых объектов инфраструктуры. Кафе, рестораны, медцентры, детский сад, школы, инженерный лицей при МГТУ им. Баумана. 🏠Стильные и просторные квартиры с уникальными видами. Высота потолков до 4,25 м, окна до 3,25 м, угловое остекление. ❤️Клуб резидентов для разных сценариев жизни: лаунж-зоны, фитнес-зал, кинотеатр, коворкинг, детская, репетиторская, террасы на крыше. ✨ Победы в престижных премиях: «Лучший ЖК-новостройка в РФ» (ТОП ЖК 2023), «Лучший реализованный проект» (конкурс Правительства Москвы 2019). Узнать больше Проектная декларация на сайте https://наш.дом.рф/. #реклама mrqz.click О рекламодателе
913
5
🤔 Зачем нужен Docker? Docker позволяет упаковать приложение и все его зависимости в контейнер, обеспечивая одинаковую среду для разработки, тестирования и продакшна. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 050
6
🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled. 🚩Пример использования 🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled. button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */ opacity: 0.6; /* Уменьшает непрозрачность */ } 🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled. button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🚩Полные примеры С HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Disabled Button Styling</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button>Active Button</button> <button disabled>Disabled Button</button> </body> </html> С CSS /* Стили для активных кнопок */ button { background-color: blue; color: white; border: 1px solid #000; padding: 10px 20px; cursor: pointer; } /* Стили для кнопок с атрибутом disabled */ button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } /* Альтернативный способ с использованием псевдокласса :disabled */ button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🟠Комбинированный подход Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей. /* Стили для кнопок с классом .special, которые имеют атрибут disabled */ button.special[disabled] { background-color: darkgray; color: black; border: 1px dashed #999; cursor: not-allowed; opacity: 0.7; } Ставь 👍 и забирай 📚 Базу знаний
990
7
Сборный груз, который приедет вовремя Собственные поезда и автопарк, доставка до двери. Единый оператор на всем маршруте. Узн
Сборный груз, который приедет вовремя Собственные поезда и автопарк, доставка до двери. Единый оператор на всем маршруте. Узнать цену #реклама lcl.transitllc.ru О рекламодателе
995
8
🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). Реализация omit с Object.fromEntries() (современный способ) function omit(obj, keys) { return Object.fromEntries( Object.entries(obj).filter(([key]) => !keys.includes(key)) ); } const user = { name: "Alice", age: 25, password: "123456" }; const safeUser = omit(user, ["password"]); console.log(safeUser); // { name: "Alice", age: 25 } Реализация omit с reduce() (альтернативный способ) function omit(obj, keys) { return Object.keys(obj).reduce((acc, key) => { if (!keys.includes(key)) acc[key] = obj[key]; return acc; }, {}); } const data = { a: 1, b: 2, c: 3 }; console.log(omit(data, ["b"])); // { a: 1, c: 3 } Если используете Lodash, можно просто вызвать import { omit } from "lodash"; const user = { name: "Alice", age: 25, password: "123456" }; const safeUser = omit(user, ["password"]); console.log(safeUser); // { name: "Alice", age: 25 } Ставь 👍 и забирай 📚 Базу знаний
1 133
9
Ищем менеджеров нейросетей, можно без опыта Опыт не нужен. Только телефон. Занятость — 3-6 часов в день. Нужно выполнять зада
Ищем менеджеров нейросетей, можно без опыта Опыт не нужен. Только телефон. Занятость — 3-6 часов в день. Нужно выполнять задачи с помощью нейросетей. Все это вы делаете из дома. Всему обучим на бесплатном курсе и после поможем со стартом. Что вас ждет за 3 дня: ✅ Уроки с практикой по 30 минут ✅ Домашние задания с проверкой и оплатой бонусами ✅ Выплата за каждую выполненную работу 🎓 Все, кто пройдет обучение, получат сертификат от школы с образовательной лицензией. Набор закрывается, как только группа заполнится. Чтобы занять место нажмите "Зарегистрироваться". Зарегистрироваться #реклама 16+ course.neurogansta.ru О рекламодателе
952
10
🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи. class UserService { constructor() { this.db = new Database(); // Прямо создаем зависимость } getUser(id) { return this.db.findUserById(id); } } С DI (гибкость) class UserService { constructor(db) { this.db = db; // DI передает зависимость извне } getUser(id) { return this.db.findUserById(id); } } // Передаем нужную зависимость const database = new Database(); const userService = new UserService(database); 🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub). const userService = new UserService(); // Всегда использует реальную Database userService.getUser(1); // Как протестировать без реальной БД? 🤔 С DI (можно подменить зависимость) class FakeDatabase { findUserById(id) { return { id, name: "Тестовый пользователь" }; } } const fakeDb = new FakeDatabase(); const userService = new UserService(fakeDb); console.log(userService.getUser(1)); // ✅ Тест без реальной БД 🟠Улучшает расширяемость (легко менять зависимости) Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase. class UserService { constructor() { this.db = new MySQLDatabase(); // Нужно менять здесь } } С DI (добавляем новую зависимость без изменения кода UserService) const db = new MongoDatabase(); // Просто передаем другую зависимость const userService = new UserService(db); 🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript). import "reflect-metadata"; import { Container, injectable, inject } from "inversify"; @injectable() class Database { findUserById(id) { return { id, name: "База данных" }; } } @injectable() class UserService { constructor(@inject(Database) db) { this.db = db; } getUser(id) { return this.db.findUserById(id); } } // Настраиваем DI-контейнер const container = new Container(); container.bind(Database).toSelf(); container.bind(UserService).toSelf(); // Получаем объект с нужными зависимостями const userService = container.get(UserService); console.log(userService.getUser(1)); Ставь 👍 и забирай 📚 Базу знаний
928
11
Розыгрыш Яндекс Станции уже в боте Любимые блогеры, розыгрыши, новости и анонсы в одном боте! Узнать больше #реклама 16+ refe
Розыгрыш Яндекс Станции уже в боте Любимые блогеры, розыгрыши, новости и анонсы в одном боте! Узнать больше #реклама 16+ refer.id О рекламодателе
825
12
🤔 Что значит type="submit"? Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 094
13
🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩Решение с ESLint: Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку. function sayHello(name) { console.log("Hello, " + name) } sayHello("John") Пример исправленного кода (ESLint fix) function sayHello(name) { console.log(`Hello, ${name}`); } sayHello("John"); 🟠Как установить и настроить ESLint? Установка npm install eslint --save-dev Создание конфига npx eslint --init Пример .eslintrc.js (настройки ESLint) module.exports = { env: { browser: true, es6: true, }, extends: [ "eslint:recommended", // Базовые рекомендации "plugin:vue/vue3-recommended" // Рекомендации для Vue ], rules: { "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных "semi": ["error", "always"], // Обязательные точки с запятой "quotes": ["error", "double"], // Только двойные кавычки }, }; Запуск проверки кода npx eslint myfile.js Автоматическое исправление ошибок npx eslint myfile.js --fix 🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave" "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку. "scripts": { "lint": "eslint src --fix" } Теперь перед коммитом можно запускать: npm run lint Ставь 👍 и забирай 📚 Базу знаний
1 069
14
🤔 В чём разница между макро- и микро-задачами? Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 125
15
Квартиры. Петербург. Колпино. Новостройка. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэ
Квартиры. Петербург. Колпино. Новостройка. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэтажных жилых корпуса 8-этажный крытый гараж на 496 парковочных мест В живописном месте у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Финансовые услуги оказывает: ПАО «Сбербанк». Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО «СЗ «ЗАГОРОДНАЯ, 71». #реклама квартал-заречье.рф О рекламодателе
994
16
🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения: console.log((123).toString()); // "123" console.log(true.toString()); // "true" console.log(false.toString()); // "false" console.log((3.14).toString()); // "3.14" Но null и undefined не имеют метода toString() и вызов приведёт к ошибке console.log(null.toString()); // ❌ Ошибка: Cannot read properties of null console.log(undefined.toString()); // ❌ Ошибка Поэтому для них лучше использовать String() console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" 🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой console.log([1, 2, 3].toString()); // "1,2,3" console.log(["яблоко", "банан"].toString()); // "яблоко,банан" console.log([].toString()); // "" (пустая строка) 🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object] const obj = { a: 1, b: 2 }; console.log(obj.toString()); // "[object Object]" Если нужно другое поведение, можно переопределить toString() в объекте const user = { name: "Иван", age: 30, toString() { return `Имя: ${this.name}, Возраст: ${this.age}`; } }; console.log(user.toString()); // "Имя: Иван, Возраст: 30" 🟠`toString()` у классов Можно переопределять метод toString() в классах class Person { constructor(name, age) { this.name = name; this.age = age; } toString() { return `${this.name} (${this.age} лет)`; } } const person = new Person("Анна", 25); console.log(person.toString()); // "Анна (25 лет)" 🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код function hello() { return "Привет!"; } console.log(hello.toString()); // "function hello() { return 'Привет!'; }" Для стрелочных функций const sum = (a, b) => a + b; console.log(sum.toString()); // "(a, b) => a + b" 🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" console.log(String(42)); // "42" console.log(String({ a: 1 })); // "[object Object]" Ставь 👍 и забирай 📚 Базу знаний
991
17
Новые авто из Китая под заказ без скрытых расходов Привезем новое авто из Китая под ключ без ожидания 180 дней. Подберем за м
Новые авто из Китая под заказ без скрытых расходов Привезем новое авто из Китая под ключ без ожидания 180 дней. Подберем за минуту! Узнать больше #реклама mrqz.me О рекламодателе
821
18
🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах. import React, { useState, useEffect } from 'react'; function DataFetchingComponent() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } export default DataFetchingComponent; 🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента. import React, { Component } from 'react'; class DataFetchingComponent extends Component { constructor(props) { super(props); this.state = { data: null, }; } componentDidMount() { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { this.setState({ data }); }) .catch(error => { console.error('Error fetching data:', error); }); } render() { const { data } = this.state; return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } } export default DataFetchingComponent; 🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js export async function fetchData() { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); } DataFetchingComponent.js import React, { useState, useEffect } from 'react'; import { fetchData } from './service'; function DataFetchingComponent() { const [data, setData] = useState(null); useEffect(() => { fetchData() .then(data => setData(data)) .catch(error => console.error('Error fetching data:', error)); }, []); return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } export default DataFetchingComponent; 🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний
974
19
IT-инфраструктура под ключ с поддержкой Yandex Cloud Спроектируем, запустим и возьмём на сопровождение. Экспертиза целой кома+4
IT-инфраструктура под ключ с поддержкой Yandex Cloud Спроектируем, запустим и возьмём на сопровождение. Экспертиза целой команды без найма в штат. 💰Новым клиентам — грант на облачные сервисы, платите только за работу специалистов. Оставьте заявку на сайте: подберём партнёра и рассчитаем стоимость. Получить консультацию #реклама 16+ yandex.cloud О рекламодателе
855
20
🤔 Как работает React? Это библиотека для построения пользовательских интерфейсов, основанная на компонентной архитектуре. Она использует Virtual DOM для оптимизации обновлений: изменения сначала вносятся в виртуальный DOM, а затем синхронизируются с реальным DOM минимальными операциями. React поддерживает однонаправленный поток данных, что упрощает управление состоянием приложения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 263
Barcha postlarni ko‘rish