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

Рет қаралды 37,959

Күн бұрын

#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

Пікірлер: 76

@rusalitchannel Жыл бұрын

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

@baigeldysultanov Жыл бұрын

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

@kostyafrompiter 2 жыл бұрын

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

@kenanhaciyev3759 8 ай бұрын

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

@theoty-js-react Жыл бұрын

Великолепный разбор!!!

@Vladislav-yw7dv Жыл бұрын

Спасибо за видео, очень полезно!

@abolnikov 2 жыл бұрын

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

@teryoshkin 2 жыл бұрын

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

@anonymousNouname 2 жыл бұрын

Так расскажи им байку про коммерческую разработку, главное собес пройти нормально.

@kostya_super Жыл бұрын

Как успехи спустя пол года?

@teryoshkin Жыл бұрын

@@kostya_super В стране началась война

@thenothing7957 Жыл бұрын

@@teryoshkin pet проектики наделал?

@user-th4qi8iv3q Жыл бұрын

как успехи

@SerhiiNesterov 2 жыл бұрын

Лайк)

@user-wl2xp8yo6x 2 жыл бұрын

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

@DevMagazineChannel 2 жыл бұрын

Посмотри чтобы повысить шансы на собеседовании: Redux-Thunk (курс) 👉 kzfaq.info/sun/PLmfIBo6rTVR5jWYfCJUIWxFcxj3AL1ZJy Redux-Saga (курс) 👉 kzfaq.info/sun/PLmfIBo6rTVR6jKRgpblTdzto9v-yWgqk- Redux (курс) 👉 kzfaq.info/sun/PLmfIBo6rTVR70B7skhP5BtczReJMZQ0Vd Паттерны ReactJS (плейлист) 👉 kzfaq.info/sun/PLmfIBo6rTVR7vVeFBPV3YrsXwk8wDbihw Все о GraphQL 👉 kzfaq.info/get/bejne/beB1lKujxM-umnU.html Вопросы на собеседовании по ReactJS 👉 kzfaq.info/get/bejne/d5Z8o5uFsqmqmHU.html Еще вопросы на собеседовании по ReactJS 👉 kzfaq.info/get/bejne/Y5x1oNt4yr-rcas.html Как передать данные между компонентами? 👉 kzfaq.info/get/bejne/eclioZd2tLveh2g.html О разработке 👉 it-dev-journal.ru

@progerweb Жыл бұрын

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

@dmitri683 2 жыл бұрын

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

@YaroslavEx Жыл бұрын

thanks!

@alenache1 2 жыл бұрын

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

@MiCbKO 2 жыл бұрын

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

@DevMagazineChannel 2 жыл бұрын

Да, вы правы, заговорился...

@romandeveloper7720 Жыл бұрын

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

@kostyafrompiter 2 жыл бұрын

А где вы работаете если не секрет?

@XAH30 Жыл бұрын

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

@user-cs7ex6vx9u 2 жыл бұрын

🥳🥳🥳

@user-uo7tg9tk3j Жыл бұрын

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

@rostikoffchannel Жыл бұрын

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

@user-py6sn6qz4p Жыл бұрын

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

@borsuk7617 2 жыл бұрын

Спасибо, без вводы объясняешь

@DevMagazineChannel 2 жыл бұрын

Спасибо!)

@seba45261 2 жыл бұрын

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

@aaaaaaaaaaaaaaaaa8296 Жыл бұрын

это его мнение по поводу джунов. Вообще в разных компаниях все разное, т.е. ты можешь пойти в одну компанию пройти собес и оцениваться как мидл разраб, но в другой компании тебя возьмут как джуна. так шо не смотрите на тайтл работы, а на требования)

@user-ir7wi3sc7l 6 ай бұрын

использовать не обязательно приходится))))))))) в этом и печаль. Пока пишешь код, многое забываешь

@PoT0P 2 жыл бұрын

Вопрос, очень сложно найти работу именно для джуна Frontenderа без опыта , такого почти нет в вакансиях. Получается что если человек без опыта он может месяцами таковым и оставаться , плюс оставаться без работы и даже если будешь писать сам свои тренировочные проекты мотивация пропадает и конечно же в настоящей работе будет совершенно иной опыт. А тому кто уже работал довольно легко, если не лениться подниматься в принципе даже до сеньора главное работать над собой а работа и деньги уже вроде есть и опыт накапливается... Так вот к чему это я, можно ли при ответе на вакансии чуток подвирать что например уже работал где-то, имеешь какой-то опыт, так как повторюсь большинство вакансий требуют опыт работы от года как минимум.. И если у тебя получится пролезть не спалишься ли ты что у тебя нет опыта и тд.. Вообщем как всё таки пролезть? ;) Ваши мысли по этому поводу ?

@jiza2377 2 жыл бұрын

искать заказы в интернете

@DevMagazineChannel 2 жыл бұрын

есть компании которые принимают стажеров и готовят из них джунов - хороший вариант вырасти

@anonymousNouname 2 жыл бұрын

Конечно можно, многие так делают. Это как знакомство, кто-то что да приврет, чтоб не отпугнуть в начале. Главное не облажаться на собесе)

@user-cp2wj8rv4y 2 жыл бұрын

Возможно мне дико повезло, но я с такой проблемой не столкнулся, сделал 4 отклика на hh, 2 из них приглашения. В первой компании сразу позвали на собес, а во второй дали тестовое, осталось только не облажаться :D

@webbomj 2 жыл бұрын

@@user-cp2wj8rv4y отчитайся сразу как все прошло, людям (мне в том числе) будет интересно!

@user-xi1kb2vm7w Жыл бұрын

@ThePro_0001 Жыл бұрын

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

@user-yu6bm5nl7k Жыл бұрын

Сколько учишься уже?

@AkeroKent Жыл бұрын

чтм бро нашел работу? тож все знал но портфолио все еще нет

@user-th4qi8iv3q Жыл бұрын

@@AkeroKent как успехи

@AkeroKent Жыл бұрын

закрепил знания и используя типизацию и свои знания работаю над портфолио@@user-th4qi8iv3q

@user-th4qi8iv3q Жыл бұрын

@@AkeroKent сколько учитесь, как с англ?

@theoty-js-react 2 жыл бұрын

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

@alexeypopescu7485 2 жыл бұрын

Привет!! Скажите, а если кодить ну вообще не интересно, как только открываю код, так аж плохо становится, мотивы только деньги и работа из любой локации, но больше деньги. Что посоветуете делать?

@tarasleuta7968 2 жыл бұрын

Найти другую работу

@dimkaokk 2 жыл бұрын

заработан везде можно и удаленно работать можно тоже не только прогером

@user-th4qi8iv3q Жыл бұрын

как щас дела

@alexeicodes 2 жыл бұрын

Неужели на джуна такие легкие вопросы? Так такое интервью куча людей пройдет, как они выбирать будут?

@seba45261 2 жыл бұрын

Да уж, легче не куда просто..

@alexeicodes 2 жыл бұрын

@@seba45261 ну если подходить к собесу с хорошей базой то хз

@webhero42 11 ай бұрын

Видео отличное, но блин, почему вы все не можете правильно произносить английские слова

@edwardyuniks5773 2 жыл бұрын

Еще вариант решения алгоритмической задачи - декларативным подходом, через рекурсию, но проверил через бенчмарки, если операций будет под миллион, это довольно медленный способ, но объем кода меньше чем с вложенным циклом и читаемость лучше; самый быстрый способ это все же с вложенными массивами - в 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); };

@kegarbekedilya6686 Жыл бұрын

а если так? 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 }

@justbenear9640 Жыл бұрын

Еще один вариант через 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));