Собеседование JUNIOR frontend REACT

#React #ReactJS

В этом выпуске разберем вопросы собеседования Junior frontend React разработчика, рассмотрим вопросы по JavaScript, HTML, CSS, которые обязательно спросят и решим алгоритмическую задачу, а также оценим алгоритмическую сложность решения.

Мы в соцсетях:

Курсы и плейлисты:

00:00 - О структуре и формате собеседования
02:36 - [JavaScript] Что такое this?
02:58 - [JavaScript] this и window в браузере
03:11 - [JavaScript] this и globalThis в NodeJS
03:46 - [JavaScript] this в объекте
04:26 - [JavaScript] this в объекте и стрелочные функции
05:00 - [JavaScript] Какие есть способы обхода массива
05:30 - [JavaScript] Отличия forEach и map
07:20 - [JavaScript] Метод filter
08:04 - [JavaScript] Метод reduce
09:24 - [JavaScript] Как сравнить на равенство строки/массивы/объекты
10:41 - [JavaScript] Различия между == и ===
11:37 - [JavaScript] Promise и async/await
12:14 - [JavaScript] Методы Promise - all, race и т.д.
12:50 - [CSS] Что такое адаптивная верстка?
13:07 - [CSS] Что такое Grid и Flexbox?
13:28 - [CSS] Что такое блочная модель (box model)?
13:54 - [CSS] Для чего используется `box-sizing: border-box;`
14:20 - [CSS] Специфичность
14:56 - [CSS] Специфичность и веса деклараций
15:35 - [CSS] Псевдоклассы и псевдоэлементы
16:06 - [HTML] Семантическая верстка
17:00 - [Браузер] Session storage / Local storage / Cookies
17:59 - [React] Что такое React и для чего он используется?
18:15 - [React] Что дает React и почему не легче писать на чистом JavaScript?
19:13 - [React] Что такое Virtual DOM?
19:42 - [React] Что такое JSX?
20:04 - [React] Отличия функциональных компонентов от классовых
20:53 - [React] Как изменить состояние компонента?
21:41 - [React] Для чего используется useEffect?
22:39 - [React] Что такое сайд эффекты (side effects)?
22:54 - [React] Как избежать утечек памяти с useEffect?
23:43 - [React] Как запустить эффект на первый рендер?
24:04 - [React] Для чего нужен массив зависимостей в useEffect
24:18 - [React] Управляемые и неуправляемые компоненты
25:25 - [React] Что такое key
26:17 - [React] Почему не рекомендуется использовать index для key?
26:54 - [React] Как передать данные между соседними компонентами?
27:50 - [React] Что такое prop drilling и как его избежать?
28:26 - [React] Библиотеки для state management и Redux
30:24 - [Алгоритмическая задача] Обзор задач
31:57 - [Алгоритмическая задача] Найти самый длинный общий префикс для заданных строк
33:08 - [Алгоритмическая задача] Решение 1
37:28 - [Алгоритмическая задача] Решение 1. Оценка алгоритмической сложности
38:15 - [Алгоритмическая задача] Решение 2. Более оптимальное
43:05 - [Алгоритмическая задача] Решение 2. Оценка алгоритмической сложности
43:37 - [JavaScript] Какой порядок вывода в консоль?

#devmagazine #devmagazinechannel

[rusalitchannel]

14:00
Разве box-sizing: border-box; включает в размер элемента margin?
Вроде только content + border + padding

[baigeldysultanov]

Голос приятный, без мямкания, блин кайф просто.
Респект автору 👏👍

[kostyafrompiter]

Ждем!=) По таймкодам ты разобрал действительно одни из самых частых вопросов. Круто.

[teryoshkin]

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

[abolnikov]

Хорошее видео. Вспомнил много нужного. Подсмотрел что то новое.
Уже пригодилось при собеседовании.
Особенно актуально когда несколько лет кодишь, а основы вылетают. То есть как работает понимаешь, а объяснить не может)

[kenanhaciyev]

ну это прямо шикардос, большое спасибо

[MiCbKO]

10:56 Вроде бы при сравнении разных типов приведение идет к числу, а не к строке. Null и undefined не приводяться

[progerweb]

Box-sizing border-box - в него не включён margin, только ширина, высота, границы и padding

[rostikoffchannel]

Прикольно… но про паттерны для Джуна автор явно «загнул» их до конца сеньоры некоторые не понимают 😅

[ТёмаКоролёв-кф]

Не знаю почему reduce привыкли только для подсчета использовать. Вот помню была задача интересная, которую решил с помощью reduce. Есть массив c заготовленными объектами ошибок. И нужно проверить входящим аргументом id ошибки в массиве, если есть, то вернуть этот элемент из массива в ином случае отдать дефолтный объект ошибки.

[XAH]

После первого же ответа про This я понял, что видео будет занимательным :))) "This это такое ключевое слово, которое ссылается на некоторый объект. Это некоторый контекст. Если его вызвать в некотором объекте, то This будет ссылаться на этот объект..."

[DevMagazineChannel]

Посмотри чтобы повысить шансы на собеседовании:

[alenache]

и reduce() не только с числами может работать

[seba]

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

[dmitri]

Привет, ты можешь записать подобное видео для middle уровня?

[romandeveloper]

Второй способ - оптимизированный. Но не сломается ли он, когда у тебя под индексом, например, 1 будет лежать следующий элемент: У тебя abc префикс по 1 и последнему нашелся, но он не подходит для

[СтройКонсалт]

40:31 в чем смысл этого шага, если arr[0].length - априори имеет наименьшую длину в отсортированном массиве?

[theoty-js]

react redux lodash mobx object function .this промисы foreach map for while case reduce filter saga

[ThePro_]

Почти на 70-80% я знал ответы, и в портфолио на гитхабе есть 10 проектов, может мне пора уже начать побывать проходить собесы. Всё чёт очкую, думаю что очень мало знаю. Спасибо за видео, было интересно)))

[ГлебМакаров-чн]

Можно первую с помощью compact trie решить