Собеседование JUNIOR frontend REACT
HTML-код
- Опубликовано: 22 май 2024
- #React #ReactJS
В этом выпуске разберем вопросы собеседования Junior frontend React разработчика, рассмотрим вопросы по JavaScript, HTML, CSS, которые обязательно спросят и решим алгоритмическую задачу, а также оценим алгоритмическую сложность решения.
Мы в соцсетях:
👉 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать: www.donationalerts.com/r/devm...
Курсы и плейлисты:
💡 Паттерны ReactJS: • 🏆 Паттерны ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Redux: • ☕️ Redux курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР ...
💡 Все о ReactJS: • 📘 ReactJS
💡 Tailwind: • 🍃 TailwindCSS курс
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
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
14:00
Разве box-sizing: border-box; включает в размер элемента margin?
Вроде только content + border + padding
Голос приятный, без мямкания, блин кайф просто.
Респект автору 👏👍
Ждем!=) По таймкодам ты разобрал действительно одни из самых частых вопросов. Круто.
ну это прямо шикардос, большое спасибо
Великолепный разбор!!!
Спасибо за видео, очень полезно!
Хорошее видео. Вспомнил много нужного. Подсмотрел что то новое.
Уже пригодилось при собеседовании.
Особенно актуально когда несколько лет кодишь, а основы вылетают. То есть как работает понимаешь, а объяснить не может)
Спасибо, очень информативно. Сейчас в нахожусь в поиске своей первой работы, столкнулся с тем, что в подавляющем большинстве вакансий требуется опыт коммерческой разработки
Так расскажи им байку про коммерческую разработку, главное собес пройти нормально.
Как успехи спустя пол года?
@@kostya_super В стране началась война
@@teryoshkin pet проектики наделал?
как успехи
Box-sizing border-box - в него не включён margin, только ширина, высота , границы и padding
Не знаю почему reduce привыкли только для подсчета использовать. Вот помню была задача интересная, которую решил с помощью reduce. Есть массив c заготовленными объектами ошибок. И нужно проверить входящим аргументом id ошибки в массиве, если есть, то вернуть этот элемент из массива в ином случае отдать дефолтный объект ошибки.
thanks!
Лайк)
Посмотри чтобы повысить шансы на собеседовании:
Redux-Thunk (курс) 👉 ruclips.net/p/PLmfIBo6rTVR5jWYfCJUIWxFcxj3AL1ZJy
Redux-Saga (курс) 👉 ruclips.net/p/PLmfIBo6rTVR6jKRgpblTdzto9v-yWgqk-
Redux (курс) 👉 ruclips.net/p/PLmfIBo6rTVR70B7skhP5BtczReJMZQ0Vd
Паттерны ReactJS (плейлист) 👉 ruclips.net/p/PLmfIBo6rTVR7vVeFBPV3YrsXwk8wDbihw
Все о GraphQL 👉 ruclips.net/video/7zEaHr_iJjA/видео.html
Вопросы на собеседовании по ReactJS 👉 ruclips.net/video/A0Lp8TMCFhA/видео.html
Еще вопросы на собеседовании по ReactJS 👉 ruclips.net/video/-6EmxGeYGAw/видео.html
Как передать данные между компонентами? 👉 ruclips.net/video/Cc2n4EOUzW4/видео.html
О разработке 👉 it-dev-journal.ru
Второй способ - оптимизированный. Но не сломается ли он, когда у тебя под индексом, например, 1 будет лежать следующий элемент: "ddddddd". У тебя abc префикс по 1 и последнему нашелся, но он не подходит для "ddddddd"
и reduce() не только с числами может работать
🥳🥳🥳
Привет, ты можешь записать подобное видео для middle уровня?
10:56 Вроде бы при сравнении разных типов приведение идет к числу, а не к строке. Null и undefined не приводяться
Да, вы правы, заговорился...
Прикольно… но про паттерны для Джуна автор явно «загнул» их до конца сеньоры некоторые не понимают 😅
После первого же ответа про This я понял, что видео будет занимательным :))) "This это такое ключевое слово, которое ссылается на некоторый объект. Это некоторый контекст. Если его вызвать в некотором объекте, то This будет ссылаться на этот объект..."
А где вы работаете если не секрет?
40:31 в чем смысл этого шага, если arr[0].length - априори имеет наименьшую длину в отсортированном массиве?
Спасибо, без вводы объясняешь
Спасибо!)
Ну это жесть конечно, столько всего знать плюс понимать как всю эту информацию, и использовать её в коммерческой разработке. Найс требования нынче..
это его мнение по поводу джунов. Вообще в разных компаниях все разное, т.е. ты можешь пойти в одну компанию пройти собес и оцениваться как мидл разраб, но в другой компании тебя возьмут как джуна. так шо не смотрите на тайтл работы, а на требования)
использовать не обязательно приходится))))))))) в этом и печаль. Пока пишешь код, многое забываешь
Можно первую с помощью compact trie решить
Вопрос, очень сложно найти работу именно для джуна Frontenderа без опыта , такого почти нет в вакансиях. Получается что если человек без опыта он может месяцами таковым и оставаться , плюс оставаться без работы и даже если будешь писать сам свои тренировочные проекты мотивация пропадает и конечно же в настоящей работе будет совершенно иной опыт. А тому кто уже работал довольно легко, если не лениться подниматься в принципе даже до сеньора главное работать над собой а работа и деньги уже вроде есть и опыт накапливается... Так вот к чему это я, можно ли при ответе на вакансии чуток подвирать что например уже работал где-то, имеешь какой-то опыт, так как повторюсь большинство вакансий требуют опыт работы от года как минимум.. И если у тебя получится пролезть не спалишься ли ты что у тебя нет опыта и тд.. Вообщем как всё таки пролезть? ;) Ваши мысли по этому поводу ?
искать заказы в интернете
есть компании которые принимают стажеров и готовят из них джунов - хороший вариант вырасти
Конечно можно, многие так делают. Это как знакомство, кто-то что да приврет, чтоб не отпугнуть в начале. Главное не облажаться на собесе)
Возможно мне дико повезло, но я с такой проблемой не столкнулся, сделал 4 отклика на hh, 2 из них приглашения. В первой компании сразу позвали на собес, а во второй дали тестовое, осталось только не облажаться :D
@@user-cp2wj8rv4y отчитайся сразу как все прошло, людям (мне в том числе) будет интересно!
function longestPrefix(arr) {
arr = arr.sort();
const lastChild = arr[arr.length - 1];
for (let i = 0; i < arr[0].length; i++) {
if (lastChild[i] !== arr[0][i]) {
return arr[0].slice(0, i);
}
}
return arr[0];
}
Почти на 70-80% я знал ответы, и в портфолио на гитхабе есть 10 проектов, может мне пора уже начать побывать проходить собесы. Всё чёт очкую, думаю что очень мало знаю. Спасибо за видео, было интересно)))
Сколько учишься уже?
чтм бро нашел работу? тож все знал но портфолио все еще нет
@@AkeroKent как успехи
закрепил знания и используя типизацию и свои знания работаю над портфолио@@user-th4qi8iv3q
@@AkeroKent сколько учитесь, как с англ?
react redux lodash mobx object function .this промисы foreach map for while case reduce filter saga
Неужели на джуна такие легкие вопросы? Так такое интервью куча людей пройдет, как они выбирать будут?
Да уж, легче не куда просто..
@@seba45261 ну если подходить к собесу с хорошей базой то хз
Привет!! Скажите, а если кодить ну вообще не интересно, как только открываю код, так аж плохо становится, мотивы только деньги и работа из любой локации, но больше деньги. Что посоветуете делать?
Найти другую работу
заработан везде можно и удаленно работать можно тоже не только прогером
как щас дела
Видео отличное, но блин, почему вы все не можете правильно произносить английские слова
Еще вариант решения алгоритмической задачи - декларативным подходом, через рекурсию, но проверил через бенчмарки, если операций будет под миллион, это довольно медленный способ, но объем кода меньше чем с вложенным циклом и читаемость лучше; самый быстрый способ это все же с вложенными массивами - в 3 с лишним раза быстрее чем у рекурсий:
let getCommonPrefix = arr => {
let pref = arr[0];
let checkSyms = i => {
if (i >= arr.length) return pref;
pref = pref.split('').filter(
(s, j) => s === arr[i][j]
).join('');
return checkSyms(i + 1);
};
return checkSyms(1);
};
а если так?
function prefix(arr: Array): string {
let pref = arr[0]
for (let i = 1; i < arr.length; i++){
if(!(arr[i].includes(pref))){
arr[0]= arr[0].slice(0,-1)
pref = prefix(arr)
break
}
}
return pref
}
Еще один вариант через array.every()
const arr = ['abc123', 'abcd123', 'abcde123', 'abcdefg123'];
const getLongestCommonPrefix = (arr) => {
const firstItem = arr[0];
let result = '';
for(let i=0; i < firstItem.length; i++) {
const isPartOfPrefix = arr.every(letter=> letter[i] === firstItem[i]);
if(isPartOfPrefix) result += firstItem[i];
else break;
}
return result;
}
console.log(getLongestCommonPrefix(arr));