50 вопросов на React JS собеседование
Вставка
- Опубліковано 14 чер 2024
- Дорожная карта и экосистема React 2024 - bit.ly/3NxXf7z
PDF шпаргалка с ответами тут: t.me/js_by_vladilen/95
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
React JS: 50 вопросов на собеседование
#react #reactjs #reactинтервью
PDF шпаргалка с ответами тут: t.me/js_by_vladilen/95
Получить профессию Frontend разработчика - bit.ly/3yzUGuZ
TimeCode
Junior
01
. 1:21 Что такое React?
02
. 2:12 Основные преимущества React?
03
. 3:12 Какие ограничения есть в React?
04
. 4:20 Что такое JSX?
05
. 5:19 Что такое virtual DOM?
06
. 7:06 ЧТо такое Props?
07
. 7:40 Что такое state и как он используется?
08
. 8:26 Что такое refs в React?
09
. 9:40 Что такое JEST?
10
. 10:00 Когда использовать функциональные, а когда Class компоненты?
11
. 10:35 Что происходит при вызове setState?
12
. 11:33 Разница между state и props?
13
. 12:20 Когда нужно делать асинхронные запросы на сервер в React
14
. 13:21 В чем смысл специального атрибута key?
15
. 14:47 Что значит компонент mounted?
16
. 15:22 Разница между контролированным и неконтролируемым компонентом?
17
. 16:00 Что такое фрагменты?
Middle
18
. 17:15 Как React обрабатывает пользовательские события?
19
. 18:53 Что такое Redux?
20
. 20:22 Основные этапы жизненного цикла компонента?
21
. 23:10 В setState передавать обьект или функцию?
22
. 24:17 Разница между Контейнер и Презентационным компонентом?
23
. 24:53 Что такое Context?
24
. 27:24 что такое Higher Order Component?
25
. 29:33 Что делает shouldComponentUpdate и почему он важен?
26
. 30:45 Что такое store в Redux?
27
. 30:27 Что такое action в Redux?
28
. 32:08 Что нельзя делать в методе render?
29
. 32:45 Какие типы middleware есть в redux для работы с асинхронностью?
30. 33:03 Что такое Pure Components?
31
. 33:43 Почему не стоит изменять state напрямую?
32
. 34:10 Как изменить state используя динамический ключ?
33
. 34:48 Что такое Error Boundaries в React?
34
. 36:10 Что такое React Hooks?
35
. 37:16 В чем разница между useRef и createRef?
36
. 38:16 Что такое useState?
37
. 39:55 Что такое prop drilling и как этого избежать?
38
. 40:58 Как валидировать props в React?
Senior
39
. 41:52 Зачем делать eject?
40
. 42:28 Что такое reducer?
41
. 43:19 Разница между Flux и MVC?
42
. 45:16 Что не так с этим кодом?
43
. 45:56 Какой второй опциональный параметр можно передать в
метод setState и за что он отвечает?
44
. 46:23 Что такое mapStateToProps и mapDispatchToProps?
45
. 46:59 Что такое React Fiber?
46
. 47:41 Разница между Flow и PropTypes?
47
. 48:19 Правда ли, что React делает ре-рендер всех
компонентов и дочерних компонентов каждый раз когда
вызывается setState?
48
. 48:49 Как можно улучшить производительность React
приложения?
49
. 49:12 Зачем нужен Redux Thunk?
50. 50:08 В чем ключевое отличие между React и Angular?
Good)
"что такое редьюсер")) безумие, но ведь реально люди выучивают это и идут прокидывать пропсы, писать return ..., и им даже платят настоящие деньги)
27
- 31:24
Джуниорские вопросы для сеньоров))
Спасибо, осталось добавить в "просмотреть позже" и не посмотреть :D
Советую всем, кто использует это видео в учебных целях проверять всю информацию. Не вздумайте сказать на интервью, что реакт реактивен, вот даже вырезка из документации: There is an internal joke in the team that React should have been called “Schedule” because React does not want to be fully “reactive”.
Да, так и есть реакт планирует каждый шаг)
Супер! за pdf Отдельное ОГРОМНОЕ, спасибо!
Все для вас)
@@VladilenMinin а где взять этот самый pdf?
@Kushich здравствуйте ссылка на телеграмм не работает
@@yelkanat7749 если вдруг еше нужно то, просто зайди в его телегу и перейди на 28 мая, он там висит
@@andreybochagov3533 в телеге пост с файлом за 28 ноября
Отлично!! Владилен, спасибо 🙏 А можешь ещё таких видео сделать про js и про Vue ? Было бы круто ))
Спасибо Владилен, у тебя самый топовый контект в ру сегменте на тему JS и всего что с ним связано.
Как всегда хорош) После курса по Реакту очень хорошо все в голове компонует!
Владилен, спасибо за видео и отдельно огромное спасибо за pdf! 🙌🏼
Огромное спасибо) Отличное видео, чтобы понять (что, для чего, почему и зачем) React
Мне похожие вопросы задавали на джуна. Сам устроился в 34 года js/react разработчиком, вот уже второй год работаю. все изучал онлайн. Сейчас все условия есть и вся инфа под рукой. Решил даже начать свой канал с советами для начинающих.
Опа, не ожидал тебя тут увидеть)
Секрет о человека, который сам собеседовал на рект: джунам, мидлам и сениорам задают одни и те же вопросы
Очень крутое видео, для структурирования информации. Владлен, спасибо за то, что ты делаешь. Respect. :)
Сенсей, бро, как же я благодарен тебе за это видео. У меня после чтения доки по реакт была такая каша в голове, а это видео вроде про собес, а вроде и нет. Мне оно помогло структурировать знания в голове ✌️👍❤️
Outdated AF
Даже сейчас много что актуально) Спасибо
Очень крут! Спасибо!
Боюсь, что все эти вопросы, это самый базовый уровень джуна :( Мне на собесе вопросы из раздела Senior задавались так, как будто это просто вопросы для разогрева
Да, так и есть, но и ролик я думаю, готовился, практически полтора года назад, на тот момент, я предполагаю, что большая часть вопросов была актуальной, кроме уровей senior/expert само собой. К тому же, надо понимать, что такие блогеры как Владилен, благодаря широкой аудитории и простоты даваемого контента, сильно повышают требуемый средний уровень по больнице. А разделение уровней знаний на джуна/миддла/сеньора - крайне не объективно, по сути это всего лишь разница в опыте используемых инструментов и соответственное знание внутренних моментов в разработке.
Круто дуже дякую за твою роботу!) Це чудоава можливість безкоштоано отримати ВАГОН інформації і мотивації навчатись і розвиватись!)))
Спасибо! Даже не представляешь насколько во время))
Удачи на собеседовании)
кто пришел сюда после "Пути самурая" ?
На 70 уроке начал смотреть, но больше про сам js , у Владилена оч круто и понятно. Этот видос и подобные смотрю с телефона , когда не могу с компом сидеть. Летим :)
Прошёл 100 уроков, сейчас уже работаю
@@punchsocks без type script взяли ? расскажи пожалуйста что еще пришлось доучить чтоб устроиться
@@sharkman6434 вряд-ли тебе понадобится то же самое, так как в каждой компании свои требования. Мне понадобилось до учить node express mongodb, но пока я к бэку на работе не притрагивался. А так больше ничего.
@@user-ow3pp6gt3r it-kamasutra. Путь самурая
шикарно,будет что подучить!
Спасибо!
шикарно! Красавчик! Спасибо большое!
Спасибо! Владилен Минин = красавчик! Как всегда на высоте))
Бомба, как раз готовлюсь и тут наткнулся на твой канал)
Огромное спасибо за видео! Мне ещё далеко до собеса, но просто послушав узнал много нового😊
Спасибо! Ответы на вопросы по реакту!
Да, я ждал этого! Мечты сбываются.
Приятного просмотра :)
Молодец, Владилен! Спасибо!
Огромная благодарность тебе. Обожаю тебя
Респект! Очень полезный контент!
Спасибо, как всегда шикарно! У вас и у Димыча с it-kamasutra - лучший js и react русскоязычный контент👍
спасибо большое , перед собесом ваше видео это просто находка
Жаль, что только один раз можно поставить лайк. Спасибо большое! 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 и за pdf в группе 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 отдельно лайки.
А как этот pdf найти ?
Хорошая работа! Спасибо!
Спасиб огромное! Pdf вообще огонь
Контент класс. Белый фон бьет по глазам, оссобено в контрасте с темными слайдами.
Спасибо, Владилешко!
11 вопрос - есть ошибка: реакт не сравнивает с DOMom. Он сравнивает новое состояние с текущим (только Virtual DOM) - и передает изменения в DOM, которое и отрисовываются.
Спасибо за видео! Можешь пожалуйста сделать такое же видео по node js
За видос спасибо, но почему устаревшие методы жизненного цикла?
Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев -
bit.ly/3QSOd5j
Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3y2uCaf
Спасибо) теперь ждем и по вью )
По Vue после 3 версии
Как общий чек лист для понимания что и как в React особенно при поиске первой работы отлично подходит👍
Пойду устраиваться сеньёром, со своим годом опыта в 18 лет😅
Устроился?) 3 года как никак прошло
@@AIohaJS Тот же вопрос хотел задать) Интересно)
А можно аналогичную ПДФ-ку по Ангулару бонусом к курсу на Юдеми?:)
Спасибо! Оч клево!
Спасибо за знания!
Лучший, спасибо
10:00 А можно узнать с чего вы это взяли?
Поскольку уже есть тесты, которые доказывают что это не так и класс-компоненты так же производительны как и функциональные.
Спасибо! Очень полезное видео! Кто планирует идти на собес, этот ролик must have.
Привет!
То, что ты выпускаешь такое видео - очень круто!
Респект!
Какая-то шутка, вопросы для мидла и сеньёра 3 года назад - инфа, без который тебя на джуна не возьмут в 23
Спасибо вам огромное 👍👍👍👍👍
Владилен, вопрос не в тему немного. Подскажи. Что ты думаешь на счет blazor c#, серьезный конкурент для фреймворков js ?
Вопрос 10: Скажите, плиз, когда использование хука "useEffect" может быть недостаточно и придется использовать классовую компоненту?
а про тестирование в react можно ожидать?
Очень полезное видео!
Супер огромное спасибо тебе
Спасибо Вальдос, когда стану профи и открою свою фирму, возьму твоих детей на работу.
Очень годное видео, только есть вопрос: методы жизненного цикла componentWillMount(), componentWillUpdate() и componentWillReceiveProps() сейчас "deprecated" насколько я знаю, разве нет?
Все верно, они деприкейтед но на собесе все равно про них могут спросить, или может попасться старый проект который нужно будет переписать)
Пожалуйста подскажите где почитать об этом и что пришло им на замену?
@@Hotabich3 Огромное спасибо !
@@dispeltr1183 для этого и нужно не хранить гуано, а сопровождать проекты нормально. Но кто же так делает, знаю знаю ))
Спасибо за отличное видео, Владилен! Что нужно знать по нативному JS (кроме основ), что бы начать изучать ReactJS?
Es6 и все темы, что я осветил в плейлисте по «сложному js»
Огромное спасибо!
Очень полезное видео, спасибо Владилен) и отдельное спасибо за пдф в телеге)
Когда будет такой же видео но только новый обновленным вопросами?
Четко обьясняешь спасибо тебе
Спасибо за контент
Ураааа, я дождался, Спасибооо!!
Контекст не был добавлен в 16 реакте, только синтаксис изменили, раньше вызывался через this.context, старый формат еще поддерживается в 16, выпилят только в 17
Так на момент выпуска, в React уже были хуки позволяющие использовать весь функционал классовых компонентов в функциональных компонента. Это к 10 вопросу)
Супер видео! Молодец! Владилен, не мог бы что-то подобное выпустить по нативному JS?
По js на канале есть практический ролик)
Спасибо, крутое видео
Спасибо за видео
Поправка: реакт не реактивен, он полностью декларативен.
Работа с обновлением частей пользовательского интерфейса не происходит путем подписки на стейт (противовес- вью, где все филды обвернуты в прокси (вью3) либо обсервабл через геттеры и сеттеры). В реакте ченж детекшн происходит с использованием декларативного подхода, где мы декларируем состояние компонента, после чего меняем в состоянии данные и маркируем компонент как 'грязный' путем вызова setState либо аналога с useState, тем самым говорим реакту, что есть смысл пересоздать виртуальный дом, т.к. мы явно указали об изменениях
что значит полностью декларативен? а setState - это что? абсолютно императивная тема
Просто боженька! Как же ты четко сделал с pdf-кой! жаль доната нет)
Донат есть, под каждым видео ссылки)
Не заметил, закину что то в поддержку хорошего контента!
СУПЕР!!!
Очень чётко рассказал
А вопрос про React Portal был, или я его пропустил? Мне попадался именно такой вопрос на уровне джуна
Можете сделать такую же тематику по Vue Js? Пожалуйста!
Спасибо за видео, готовлюсь к интервью. На счёт 10-го вопроса "Когда стоит использовать классовые компоненты а когда функциональные", не устарел ли ответ? Всё чаще слышу что разработчики библиотеки призывают отказываться от классовых компонентов и использовать только функциональные. Чувствую себя немного тормозом, потому что изучая Реакт по видосам из Ютюба, привык работать именно с классовыми компонентами, мой пет проект и 2 тестовых задания были сделаны полностью на классовых компонентах, ибо хотя они требуют больше кода, мне кажутся более удобными.
Кто-нибудь может поделиться опытом помогло ли данное видео на собеседовании? Автору в любом случае спасибо за труд
Уже с весны 19го года есть хуки, так что функциональные компоненты вполне себе заменяют классовые, и большинство веще делают даже лучше. Единственное, где классы ещё нужны это componentDidCatch(getDerivedStateFromError уже вроде) или частные случаи, вроде Singleton паттерна, который на функциях я пока как сделать адекватно не нашел.
> 32. 34:10 Как изменить state используя динамический ключ?
- а в функциональном компоненте альтернатива есть этому?
> 47. 48:19 Правда ли, что React делает ре-рендер всех
компонентов и дочерних компонентов каждый раз когда
вызывается setState?
- то есть твоего заявления следует, что по-умолчанию соседние и родительские тоже перерендериваются, когда в одном дочернем делаешь setState?
В Минске(Беларусь) на позицию junior спрашивают в основном из перечня вопросов по мидлу и сениору, все таки 300$ в месяц на дороге не валяются, а еще желательно без реально работающего приложения не приходить))
@@Roman-jn2pd да да, а если ты такой придешь скажешь "Я умею велстать, а еще на cms натягивать шаблоны" они просто умрут со смеху:)
Привет, надеюсь тебе удалось устроиться) Подскажи пожалуйста можно ли как-нибудь с тобой связаться узнать про собесы? Сам из Минска очень интересно узнать, так сказать, из первых уст, какие условия, требования, вопросы у нас задают.
Тебе за 300$ не стыдно работать?
Спасибо 🙏
Доброго дня. Тема нужная. Актуализировать бы)
Ура, PDF
А скиньте пожалуйста ссылку где скачать эти вопросы и ответы?!
Что такое refs - это сокращ. References - означает что мы можем создавать так называемые ссылки, да вот скриншот на оф.док - гениальное объяснение, такое же как и документация, тебе на собеседовании скажут - ок не зачитывай зазубренной объясни своими словами что это)) без ввода в определение что это такое за сущность в React или JS - в голове так и остается пустота что этот нечто абстрактное что создается при помощи React.createRef()
- жизненный цикл он один, методы у него разные;
- контр./неконтр. коп-ты думаю вы сами не понимаете до конца разницу, так как пример противоречащий: инпут и текстареа можно как обрабатывать так и не обрабатывать;
Контролируемые компоненты - К-ты в которых источником значений полей (форм) ввода, является состояние самого реакт компонента, а изменение этих значений устанавливается функциями обработчиками, а не HTML поведением по умолчанию. Например
огонь!
Интервьюер: Должен вам сказать, что мы работаем в подразделении, занимающимся постройкой большого количества коричневых домов. Доводилось ли вам строить множество коричневых домов?
Плотник: Ну, я же плотник - я строю дома, а люди уже красят их так, как пожелают.
Интервьюер: Да, я понимаю, но не могли бы вы подсказать мне,сколько у вас опыта именно с коричневыми? Ну, плюс-минус.
Плотник: Я действительно понятия не имею. С того момента, как дом построен, меня не волнует, в какой цвет его покрасят. Может, шесть месяцев?
Интервьюер: Шесть месяцев? Вообще-то мы ищем кого-нибудь с гораздо большим опытом коричневого
Было бы любопытно посмотреть такое же видео по Vue
Почему видео вышло 28 Ноября 2019 а все скриншоты имеют старый синтаксис Реакта? То есть видно использование старых классовых компонентов
Классы с появлением хуков не ушли
Владилен, разве реакт что-то изменяет? На сколько я понимаю, мутирование не приведет к перерендору.
Спасибо!
Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
Если, к примеру, кодишь в VisualCode, то он автоматом к разрешению файла подвязывает интелектуальную проверку синтаксиса и автоподстановку. Т.е. если у тебя файл .js - а в нем рендерится JSX, то проверка - только по .js. При файлах *.jsx - будет обрабатываться js вместе с jsx.
В данном случае здесь про комфортность кодинга в конкретном редакторе.
Можно пример использования на сервере?
спасибо)
48 вопрос не пойму почему небыли названы redux context...
По каким критериям ты делил вопросы на джуновские/сеньорские? Почему в вопросах для сеньоров полно базовых вещей без которых даже на трейни не возьмут?
Мне интересно, сколько нужно потеть, что б уж куда то взяли)
@@curemoonlight4509 не много, просто броьшинство разрабов пиздят и кичатся
Бро ,не понимаю тебя ,как ты делишься с нами такими вещами бесплатно?Ты супер-человек!!!!!
Делаю так же. Чем больше отдаёшь во Вселенную, тем больше получаешь обратно + помогаешь эволюции.
Вся эта информация есть в документации
47 вопрос - Тут на самом деле вопрос на немного глубокую тему. Например, если в нашей произвольной ф-ии обработчик в ряд написать 3 вызова setState, то реакт сгруппирует эти вызовы setState и обновит только 1 раз компонент (и его чилдов), а не будет 3 раза перерисовывать родителя и чилдов. Собственно, это одна из причин, почему setState - асинхронный(странно, что в вашем списке тут нет этого вопроса)
Не совсем так
Очень в тему
Приятного просмотра)
Привет, сними пожалуйста видео про алгоритмы, какие учить, как учить и тд. Спасибо.
Алгоритмы в мозгу должны рождаться, а не учить их надо. Никогда не понимал зачем учить то, что должен сам придумывать!
@@cybersystem5137 согласен с тобой. Только заменил бы "придумывать" на "понимать"
@@cybersystem5137 не совсем верно, есть проверенные временем алгоритмы, вроде бинарного поиска, быстрой сортировки, поиска в ширину, множество алгоритмов по поиску кратчайшего пути, которые лучше знать и применять их, чтобы максимизировать скорость работы программы, чем изобретать свой велосипед, который будет ездить в 3 раза медленней и выглядеть по-уродски
@@user-iq9ll8lz9m есть, а еще есть куча умных слов и вещей. А еще они давно уже оформлены во встроенные функции языков или отдельными библиотеками. Это как если бы автопроизводители не брали наработки прошлых лет в готовых чертежах и технологиях, а с полного нуля воспроизводили бы эту технологию на своих мощностях. Да и не только производители авто. Те же процессоры, видеокарты, да вообще любые чипы и электроника. Не брать готовое решение, а понимать технологию и сначала воспроизводить ее у себя, а уж потом приступать к производству. Тут тоже самое - есть либы, берешь и юзаешь вместо того, чтобы сначала писать свою либу, а потом уже решать задачу.
@@cybersystem5137 ты не совсем догоняешь что ты пишешь, ладно, удачи
По Vue.js сделай подобное пожалуйста:)
Круто
Жаль только что про useEffect и useReducer ничего не было, или например вопрос когда использовать Redux а когда можно обойтись useContext
Тут все просто: когда небольшая иерархия компонентов, то контекст отличный вариант
А если приложение сложное - лучше Redux