50 вопросов на React JS собеседование
HTML-код
- Опубликовано: 12 май 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
Отлично!! Владилен, спасибо 🙏 А можешь ещё таких видео сделать про js и про Vue ? Было бы круто ))
Как всегда хорош) После курса по Реакту очень хорошо все в голове компонует!
Владилен, спасибо за видео и отдельно огромное спасибо за pdf! 🙌🏼
Очень крутое видео, для структурирования информации. Владлен, спасибо за то, что ты делаешь. Respect. :)
Спасибо Владилен, у тебя самый топовый контект в ру сегменте на тему JS и всего что с ним связано.
Огромное спасибо) Отличное видео, чтобы понять (что, для чего, почему и зачем) React
Супер! за pdf Отдельное ОГРОМНОЕ, спасибо!
Все для вас)
@@VladilenMinin а где взять этот самый pdf?
@Kushich здравствуйте ссылка на телеграмм не работает
@@yelkanat7749 если вдруг еше нужно то, просто зайди в его телегу и перейди на 28 мая, он там висит
@@andreybochagov3533 в телеге пост с файлом за 28 ноября
Сенсей, бро, как же я благодарен тебе за это видео. У меня после чтения доки по реакт была такая каша в голове, а это видео вроде про собес, а вроде и нет. Мне оно помогло структурировать знания в голове ✌️👍❤️
Outdated AF
Очень крут! Спасибо!
Мне похожие вопросы задавали на джуна. Сам устроился в 34 года js/react разработчиком, вот уже второй год работаю. все изучал онлайн. Сейчас все условия есть и вся инфа под рукой. Решил даже начать свой канал с советами для начинающих.
Опа, не ожидал тебя тут увидеть)
Секрет о человека, который сам собеседовал на рект: джунам, мидлам и сениорам задают одни и те же вопросы
шикарно,будет что подучить!
Спасибо!
шикарно! Красавчик! Спасибо большое!
Какая-то шутка, вопросы для мидла и сеньёра 3 года назад - инфа, без который тебя на джуна не возьмут в 23
Огромное спасибо за видео! Мне ещё далеко до собеса, но просто послушав узнал много нового😊
Даже сейчас много что актуально) Спасибо
Спасибо! Владилен Минин = красавчик! Как всегда на высоте))
Спасибо! Даже не представляешь насколько во время))
Удачи на собеседовании)
Круто дуже дякую за твою роботу!) Це чудоава можливість безкоштоано отримати ВАГОН інформації і мотивації навчатись і розвиватись!)))
Спасибо, как всегда шикарно! У вас и у Димыча с it-kamasutra - лучший js и react русскоязычный контент👍
Спасибо! Ответы на вопросы по реакту!
Бомба, как раз готовлюсь и тут наткнулся на твой канал)
Огромная благодарность тебе. Обожаю тебя
Респект! Очень полезный контент!
Советую всем, кто использует это видео в учебных целях проверять всю информацию. Не вздумайте сказать на интервью, что реакт реактивен, вот даже вырезка из документации: There is an internal joke in the team that React should have been called “Schedule” because React does not want to be fully “reactive”.
Да, так и есть реакт планирует каждый шаг)
Молодец, Владилен! Спасибо!
Хорошая работа! Спасибо!
Да, я ждал этого! Мечты сбываются.
Приятного просмотра :)
Спасибо за видео! Можешь пожалуйста сделать такое же видео по node js
Спасибо, Владилешко!
Спасиб огромное! Pdf вообще огонь
Как общий чек лист для понимания что и как в React особенно при поиске первой работы отлично подходит👍
Пойду устраиваться сеньёром, со своим годом опыта в 18 лет😅
Устроился?) 3 года как никак прошло
@@AIohaJS Тот же вопрос хотел задать) Интересно)
Жаль, что только один раз можно поставить лайк. Спасибо большое! 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 и за pdf в группе 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 отдельно лайки.
А как этот pdf найти ?
Контент класс. Белый фон бьет по глазам, оссобено в контрасте с темными слайдами.
Спасибо за знания!
спасибо большое , перед собесом ваше видео это просто находка
Лучший, спасибо
Спасибо вам огромное 👍👍👍👍👍
Спасибо! Оч клево!
Огромное спасибо!
Привет!
То, что ты выпускаешь такое видео - очень круто!
Респект!
Боюсь, что все эти вопросы, это самый базовый уровень джуна :( Мне на собесе вопросы из раздела Senior задавались так, как будто это просто вопросы для разогрева
Да, так и есть, но и ролик я думаю, готовился, практически полтора года назад, на тот момент, я предполагаю, что большая часть вопросов была актуальной, кроме уровей senior/expert само собой. К тому же, надо понимать, что такие блогеры как Владилен, благодаря широкой аудитории и простоты даваемого контента, сильно повышают требуемый средний уровень по больнице. А разделение уровней знаний на джуна/миддла/сеньора - крайне не объективно, по сути это всего лишь разница в опыте используемых инструментов и соответственное знание внутренних моментов в разработке.
Очень полезное видео, спасибо Владилен) и отдельное спасибо за пдф в телеге)
Спасибо) теперь ждем и по вью )
По Vue после 3 версии
Спасибо за отличное видео, Владилен! Что нужно знать по нативному JS (кроме основ), что бы начать изучать ReactJS?
Es6 и все темы, что я осветил в плейлисте по «сложному js»
Ураааа, я дождался, Спасибооо!!
Супер огромное спасибо тебе
Спасибо за контент
Супер видео! Молодец! Владилен, не мог бы что-то подобное выпустить по нативному JS?
По js на канале есть практический ролик)
Очень полезное видео!
11 вопрос - есть ошибка: реакт не сравнивает с DOMom. Он сравнивает новое состояние с текущим (только Virtual DOM) - и передает изменения в DOM, которое и отрисовываются.
Спасибо, крутое видео
Так на момент выпуска, в React уже были хуки позволяющие использовать весь функционал классовых компонентов в функциональных компонента. Это к 10 вопросу)
Контекст не был добавлен в 16 реакте, только синтаксис изменили, раньше вызывался через this.context, старый формат еще поддерживается в 16, выпилят только в 17
А можно аналогичную ПДФ-ку по Ангулару бонусом к курсу на Юдеми?:)
Спасибо! Очень полезное видео! Кто планирует идти на собес, этот ролик must have.
Просто боженька! Как же ты четко сделал с pdf-кой! жаль доната нет)
Донат есть, под каждым видео ссылки)
Не заметил, закину что то в поддержку хорошего контента!
За видос спасибо, но почему устаревшие методы жизненного цикла?
Четко обьясняешь спасибо тебе
Очень чётко рассказал
Спасибо за видео
Поправка: реакт не реактивен, он полностью декларативен.
Работа с обновлением частей пользовательского интерфейса не происходит путем подписки на стейт (противовес- вью, где все филды обвернуты в прокси (вью3) либо обсервабл через геттеры и сеттеры). В реакте ченж детекшн происходит с использованием декларативного подхода, где мы декларируем состояние компонента, после чего меняем в состоянии данные и маркируем компонент как 'грязный' путем вызова setState либо аналога с useState, тем самым говорим реакту, что есть смысл пересоздать виртуальный дом, т.к. мы явно указали об изменениях
что значит полностью декларативен? а setState - это что? абсолютно императивная тема
Уже с весны 19го года есть хуки, так что функциональные компоненты вполне себе заменяют классовые, и большинство веще делают даже лучше. Единственное, где классы ещё нужны это componentDidCatch(getDerivedStateFromError уже вроде) или частные случаи, вроде Singleton паттерна, который на функциях я пока как сделать адекватно не нашел.
> 32. 34:10 Как изменить state используя динамический ключ?
- а в функциональном компоненте альтернатива есть этому?
> 47. 48:19 Правда ли, что React делает ре-рендер всех
компонентов и дочерних компонентов каждый раз когда
вызывается setState?
- то есть твоего заявления следует, что по-умолчанию соседние и родительские тоже перерендериваются, когда в одном дочернем делаешь setState?
Очень годное видео, только есть вопрос: методы жизненного цикла componentWillMount(), componentWillUpdate() и componentWillReceiveProps() сейчас "deprecated" насколько я знаю, разве нет?
Все верно, они деприкейтед но на собесе все равно про них могут спросить, или может попасться старый проект который нужно будет переписать)
Пожалуйста подскажите где почитать об этом и что пришло им на замену?
@@Hotabich3 Огромное спасибо !
@@dispeltr1183 для этого и нужно не хранить гуано, а сопровождать проекты нормально. Но кто же так делает, знаю знаю ))
СУПЕР!!!
Спасибо 🙏
Спасибо Вальдос, когда стану профи и открою свою фирму, возьму твоих детей на работу.
10:00 А можно узнать с чего вы это взяли?
Поскольку уже есть тесты, которые доказывают что это не так и класс-компоненты так же производительны как и функциональные.
спасибо)
а про тестирование в react можно ожидать?
Ура, PDF
Спасибо за видео, готовлюсь к интервью. На счёт 10-го вопроса "Когда стоит использовать классовые компоненты а когда функциональные", не устарел ли ответ? Всё чаще слышу что разработчики библиотеки призывают отказываться от классовых компонентов и использовать только функциональные. Чувствую себя немного тормозом, потому что изучая Реакт по видосам из Ютюба, привык работать именно с классовыми компонентами, мой пет проект и 2 тестовых задания были сделаны полностью на классовых компонентах, ибо хотя они требуют больше кода, мне кажутся более удобными.
огонь!
Здраствуйте, Владилен! Будете ли Вы записывать полный курс по React???
Думаю было бы интересно огромному колическу людей.
Заранее спасибо за ответ.))))
Обратите внимание на описания к каждому ролику!
Баба, зачем тебе кодинг?
@@TyrboCreed а тебе зачем?
Хотелось бы больше объяснений про то, как реакт создаёт одно событие на приложение для оптимизации, ну или хотя бы ссылку на документацию официальную.
По пузырьку, это и в обычной верстке используется. Еще говорят делегирование событий. Кидается слушатель на всю страницу, передается event, проверяем если event.target === то что на нужно(обычно по классу проверяют в верстке) то выполняем какие-то действия
По крайней мере я так понял)
Владилен, вопрос не в тему немного. Подскажи. Что ты думаешь на счет blazor c#, серьезный конкурент для фреймворков js ?
42: С этим кодом не так вот что: в больших проектах некоторые проблемы с поддержкой кода начинаются с того, что кто-то пытается связать пропсы со стейтом.
есть целый статический метод для этого, getDerivedStateFromProps, все работает
@@6alalaikA да, но классы - это легаси.
Что такое refs - это сокращ. References - означает что мы можем создавать так называемые ссылки, да вот скриншот на оф.док - гениальное объяснение, такое же как и документация, тебе на собеседовании скажут - ок не зачитывай зазубренной объясни своими словами что это)) без ввода в определение что это такое за сущность в React или JS - в голове так и остается пустота что этот нечто абстрактное что создается при помощи React.createRef()
- жизненный цикл он один, методы у него разные;
- контр./неконтр. коп-ты думаю вы сами не понимаете до конца разницу, так как пример противоречащий: инпут и текстареа можно как обрабатывать так и не обрабатывать;
Контролируемые компоненты - К-ты в которых источником значений полей (форм) ввода, является состояние самого реакт компонента, а изменение этих значений устанавливается функциями обработчиками, а не HTML поведением по умолчанию. Например
Спасибо
кто пришел сюда после "Пути самурая" ?
На 70 уроке начал смотреть, но больше про сам js , у Владилена оч круто и понятно. Этот видос и подобные смотрю с телефона , когда не могу с компом сидеть. Летим :)
Прошёл 100 уроков, сейчас уже работаю
@@punchsocks без type script взяли ? расскажи пожалуйста что еще пришлось доучить чтоб устроиться
@@sharkman6434 вряд-ли тебе понадобится то же самое, так как в каждой компании свои требования. Мне понадобилось до учить node express mongodb, но пока я к бэку на работе не притрагивался. А так больше ничего.
@@user-ow3pp6gt3r it-kamasutra. Путь самурая
47 вопрос - Тут на самом деле вопрос на немного глубокую тему. Например, если в нашей произвольной ф-ии обработчик в ряд написать 3 вызова setState, то реакт сгруппирует эти вызовы setState и обновит только 1 раз компонент (и его чилдов), а не будет 3 раза перерисовывать родителя и чилдов. Собственно, это одна из причин, почему setState - асинхронный(странно, что в вашем списке тут нет этого вопроса)
Не совсем так
В Минске(Беларусь) на позицию junior спрашивают в основном из перечня вопросов по мидлу и сениору, все таки 300$ в месяц на дороге не валяются, а еще желательно без реально работающего приложения не приходить))
@@Roman-jn2pd да да, а если ты такой придешь скажешь "Я умею велстать, а еще на cms натягивать шаблоны" они просто умрут со смеху:)
Привет, надеюсь тебе удалось устроиться) Подскажи пожалуйста можно ли как-нибудь с тобой связаться узнать про собесы? Сам из Минска очень интересно узнать, так сказать, из первых уст, какие условия, требования, вопросы у нас задают.
Тебе за 300$ не стыдно работать?
Бро ,не понимаю тебя ,как ты делишься с нами такими вещами бесплатно?Ты супер-человек!!!!!
Делаю так же. Чем больше отдаёшь во Вселенную, тем больше получаешь обратно + помогаешь эволюции.
Вся эта информация есть в документации
Было бы любопытно посмотреть такое же видео по Vue
По Vue.js сделай подобное пожалуйста:)
Круто
Жаль только что про useEffect и useReducer ничего не было, или например вопрос когда использовать Redux а когда можно обойтись useContext
Тут все просто: когда небольшая иерархия компонентов, то контекст отличный вариант
А если приложение сложное - лучше Redux
Когда будет такой же видео но только новый обновленным вопросами?
Можете сделать такую же тематику по Vue Js? Пожалуйста!
Очень в тему
Приятного просмотра)
Доброго дня. Тема нужная. Актуализировать бы)
Вопрос 10: Скажите, плиз, когда использование хука "useEffect" может быть недостаточно и придется использовать классовую компоненту?
Спасибо!
Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
Если, к примеру, кодишь в VisualCode, то он автоматом к разрешению файла подвязывает интелектуальную проверку синтаксиса и автоподстановку. Т.е. если у тебя файл .js - а в нем рендерится JSX, то проверка - только по .js. При файлах *.jsx - будет обрабатываться js вместе с jsx.
В данном случае здесь про комфортность кодинга в конкретном редакторе.
А вопрос про React Portal был, или я его пропустил? Мне попадался именно такой вопрос на уровне джуна
Привет, сними пожалуйста видео про алгоритмы, какие учить, как учить и тд. Спасибо.
Алгоритмы в мозгу должны рождаться, а не учить их надо. Никогда не понимал зачем учить то, что должен сам придумывать!
@@cybersystem5137 согласен с тобой. Только заменил бы "придумывать" на "понимать"
@@cybersystem5137 не совсем верно, есть проверенные временем алгоритмы, вроде бинарного поиска, быстрой сортировки, поиска в ширину, множество алгоритмов по поиску кратчайшего пути, которые лучше знать и применять их, чтобы максимизировать скорость работы программы, чем изобретать свой велосипед, который будет ездить в 3 раза медленней и выглядеть по-уродски
@@user-iq9ll8lz9m есть, а еще есть куча умных слов и вещей. А еще они давно уже оформлены во встроенные функции языков или отдельными библиотеками. Это как если бы автопроизводители не брали наработки прошлых лет в готовых чертежах и технологиях, а с полного нуля воспроизводили бы эту технологию на своих мощностях. Да и не только производители авто. Те же процессоры, видеокарты, да вообще любые чипы и электроника. Не брать готовое решение, а понимать технологию и сначала воспроизводить ее у себя, а уж потом приступать к производству. Тут тоже самое - есть либы, берешь и юзаешь вместо того, чтобы сначала писать свою либу, а потом уже решать задачу.
@@cybersystem5137 ты не совсем догоняешь что ты пишешь, ладно, удачи
Спасибо, отличное видео. Правда не понятно почему автор пользовался диаграммой с устаревшими методами жизненного цикла. Также не понятно по какому принципу были разделены вопросы, и для чего нужно было разносить тематические вопросы по разным уровням( в частности все что касается redux, на мой взгляд, должно быть на одном уровне, и этот уровень - джун, т .к. на одном реакте далеко не уедешь).
Очень условное разделение
42й вопрос... Я б сказал что надо спред оператор использовать, вдруг в стейте еще что-то есть, оно ж похерится.
За пдф респект, досматривать видос не буду, уже всё прочитал, но лайкну однозначно )
Еще колокольчик мне очень поможет)
@@VladilenMinin уже есть давно )
Вопрос 47 довольно каверзный и, как мне кажется, неоднозначно описан в документации! Из практики я встречал только ререндер родителя и всех дочерних компонентов! Т.е. распространение на дерево вниз! В доке написано так, будто все дерево ререндерится. В этом видео сказано так же. Но это убивает весь смысл реакта и его детерминированность на компоненты в таком случае! Вот есть тест, который я когда-то проходил, вопрос 4 www.interviewhelper.org/ru/quiz/onlain-test-po-react-js Правильный ответ: реакт ререндерит только компонент. Так и кому верить в таком случае? )) Я лично верю себе, т.к. на практике я видел, что ререндер идет только родителя и всех вложенных компонентов, но никак не ВСЕГО дерева!
13) Делать запросы на сервер из компонентно не очень хорошая идея. Лучше для этог использовать middlware, ту же saga.