Собеседование на Junior Frontend разработчика на React

Транскрипция видео:

• мы продолжаем с вами серию роликов про собеседований где сегодня у нас гостях будет юля на позицию junior фронт-энд разработчика на react юля какое-то время работала со мной кроме этого она активно изучала мои курсы поэтому я надеюсь что знание которые она смогла усвоить будут достаточно не только на этой позиции но и на позицию выше [музыка] итак сегодня с нами июля и мы проводите небольшое импровизируем на собеседование по react html css в общем junior фронт-энд разработчика начале июля скажи

  00:00:00 - 00:01:07

• пожалуйста себе кем ты работаешь и куда ты хочешь двигаться вообще просто тебе привет меня зовут юля я сейчас младший разработчик в компании denon я работаю над стартапам это очень сложная штука с этими виртуальными машинами и я покажу я работаю недавно поэтому я не очень еще разобралась в проекте вот шуна джесси на typescript верстка html css также свободное время учу мгу хочу потом попробовать себя в веке вот ну из фреймворков read energy для сервис сайт рендеринга отлично процессор или до осени поговорим

  00:00:36 - 00:02:26

• о почему gold почему не надо стоишь скриптом не знаю я смотрела сначала на ногу вот а потом иногда стоит скрипте такие огромные конструкции это пишешь я подумаю можно попробовать какой-то там другой язык но мне нравится картинка это хорошо ну в год с generique мы возможно тоже будет страшной конструкции я честно говоря их особенно не пробовал ещё вроде задам тоже интерфейс и потом еще указатели всякие года хорошо так предлагаю начать с простого блока с того что человек ноги этаж темы челгу cribs не раз писал html первый проект

  00:01:32 - 00:03:07

• года полтора назад мерным то есть в основном сейчас пишут если говорить проекту gsx вообще чем отличается что-то общее между это было слово что-то общее между html и xml ну это как бы ariag то есть мы можем создавать компоненты в ряд как просто с помощью функции create react элемент вот но так как это не очень удобно это не очень читаемый разработчики придумали и секс будет синтаксиса вот и он очень похож на стене составит труда и хорошо окей а если вывернуть везет как html ну мы в сексе все равно так или

  00:02:20 - 00:04:08

• иначе в результате получаем ешьте элементы и когда мы получаем элемент html элементы мы многие типом епишина чем на html5 припаять есть такое понятие как семантическая верстка семантика что это такое расскажи примеры ну есть например такие теги как horn of a section is экшн экшн и и вот и footer и другие и чтобы повысить доступность сайтов то используется имя семантическая верстка то есть кое какие то не помню поисковые роботы они смотрят да здесь у нас там articles водитель на статья здесь у нас заголовок и это

  00:03:17 - 00:04:49

• ну отчасти прайм тасс действительно поисковых роботов какие-то вещи полезны но как человек который я близко к сиону seo на самом деле вы можете стать сайт на девах ему будет не принципиально главное чтоб там было правильно семантику бы гоблин доступности доступности правильно на что она влияет например to love ну когда люди не помню как называется прибор когда люди переключают на которую сама венчали бы не видящие они готовы переключают и например читается то что там написано принялись это будет

  00:04:05 - 00:05:24

• на сам скажет что-то навигации screen совершенно верно скрины да абсолютно верно действительно screen лидеров это очень удобно ну и кроме этого часть семантики то есть мы щас приговорили пранав который на самом деле полезно в основном с коридором то есть какая-то например кнопка как мы будем верстать кнопку таким элементом батин батон а почему не делаем это кнопка логично а ну можно ли мы сделать кнопку так вообще наверное да ну и тоже будет неправильно почему неправильно что нам придется сделать с диву чтобы бы стал кнопкой

  00:04:44 - 00:06:05

• через какую-то поняла у кнопки есть такие псевдо-элементы или класса все время пытаюсь например там design and focus состояния вот и поэтому если мы будем di1 то нам то сок леса сам самим писать и это будет только дополнительными до рождения css абсолютно верно что еще нет у дивы в сравнении с кнопкой относительно навигации с клавиатуры например мы не можем атаковать the banks of тоже наверно абсолютно верно да то есть нам нужно воспроизводить кучу всего и кроме этого нам опять таки нужно будет

  00:05:28 - 00:06:54

• воспроизводить доступность потому что когда мы наводим на кнопку с точки зрения скрины видов но он говорит что эта кнопка когда мы наводим на ti fa re что это просто блок вот недавно тучи бог съела и а также если костанае делать там надо скрывать миссия скрыла такая а у меня был то он сначала не кликал сыновей был кликается на сам чем бокса подкасты на не кликается тому казалось что я его сначала поместить по из поместить его лейбл просто сверху при и написать мир там для такого the input а то он чем

  00:06:13 - 00:07:38

• бокс не кликается нужно поместить именно в лейбл а причем еще потом пришлось основному checkbox и который скрыт и задать размеры начала не работала до этот кастомизация но сейчас разрабатываться блага спецификация которая позволит в дальнейшем когда-нибудь уже костюме дерусь все что угодно select хочу буксов без таких там с бубном на сейчас ты права ok кстати можно ли вот мы говорили про поисковики ты сказал что поисковикам разметка важно на самом деле просто вот такие nav имеем практически никак не влияет на

  00:06:56 - 00:08:18

• индексирование а вот есть специально этом разметка или теги которые позволяют сказать поисковикам что типа вот это продукт а вот это под ним отзыв у этого отзывы там есть автор не какой-то рейтинг стал после вот с такой разметки когда-нибудь если сталкиваясь кто-то написал неправильно то есть я знаю article типа и и определяет как статью основную потом есть разница между выделением жены жирным шрифтом потому что типа если там как-то выделять его можно поискать понимать на что эта цитата там еще что

  00:07:38 - 00:08:50

• то но так сильно но не жирным там есть кого тут элемент беку и специальными называемые нет это на самом деле open graph open graph разметка и схему арка но самом деле open graph от набор треков а есть разметка схема под схемах арк позволяет нам задать в теле нашего html что типа вот этот div который есть этот div будет обозначать обертка отзыва а внутри есть типа автор этого отзывы рейтинг так далее при этом если даже нет рейтинга как тип цифрового вопрос показа звездочки мы можем ему сказать что это

  00:08:18 - 00:09:33

• мета причем нет используем не в клинику не роль или как назывался не троллят роли это больше к ари атрибутом то есть вряд ли but i когда мы делаем доступность мы можем задать руль элементу а здесь именно схематическая схема разметки который позволяет поисковикам на же сниппеты можешь ты видела когда-то в поиске вбиваешь типа рейтинг чего-нибудь и там в поисковике заголовок текст а внизу типа 3-4 звездочки и там какой-нибудь пишется четыре из пяти сто кто отзывов вот это как раз достигается open graph

  00:08:56 - 00:10:09

• ok если вернуться теперь от html и перейти к css и тому как мы расклада нас html какими вообще какие знаешь вообще системы раскладки нашего html fc сессия никаким пользовалась ну например но их на за это время пример табличная верстка есть табличная пользовалась тоже давно уже наверное это был если еще вопрос нужно до сих пор табличное верно а и flex и гряды вот это это вроде в принципе выполняет одно и тоже дам можем почти одно и то же сверстать flex мы глядим почти в каких случаях хорошо использовать коллектив кафедрами

  00:09:32 - 00:10:58

• ну если у нас например какой-то список элементов и у нас элементы нужно расположить то мы либо по оси x просто либо possible to здесь удобнее будет использовать лекс элементы если же у нас например нужно сделать несколько голов несколько колонн и несколько там столбцов то удобнее быстрее будет сделать с помощью городов супер хорошо а что такое псевдо-класса псевдо-элементы чем не отличаются это я честно уже не очень помню псевдо-класс это вроде мифов то почти явор оборот только наоборот ность всех элементов автор

  00:10:21 - 00:11:46

• класс child o' mine источают или это тоже вот образом бифура автор это совершенно верно псевдо-элемент потому что они существуют у нас в результате мы можем туда бифур и автор задать какой-то контент появится - псевдо-классы когда мы хотим чтобы эхо говорит хорошо суда теперь сложный вопрос typescript или java-script почему ну потому что он подсказывает никакого typescript у нее которой вот есть конструкция смотришь на такой можешь схватиться за голову и не понимая что там написано но если у тебя например не будет какого-то

  00:11:06 - 00:12:39

• элемента ли какого-то свойство в объект это с помощью typescript а тебе на этапе там пока ты разрабатываешь на так и разработку тебя уже все будет видно то есть написал код тебе подсвечивает ошибка я поправил до я тоже за просто многие в комментариях но не многие комментарии комментарии когда мне видео против скриптах и все говорят на не тот же typescript на java скрипте писать лучше вон смотрите на самом деле по мне это тяжело на фронте еще наверное допустимо но все равно для больших проектов просто невозможно под

  00:11:59 - 00:13:07

• мари factory я всегда за typescript им подсказывать опять частично не нужно писать что-то нажал там толчком тебе все показал конечно да абсолютно тоже и сразу же понятно например по интерфейсам что-то получаешь bad and это самого фронта потому что так типа дернул получил какой-то объект джесси не понятно что это давайте она выводите смотреть что да как а такого не посмотрела писал и все абсолютно если уж тогда typescript то чем тип у нас отличается от интерфейса во первых нотацией то есть например

  00:12:33 - 00:13:57

• интерфейс напишем интернет интерфейс название и фигурные скобки и там описываем какие-то свойства вот если тип но мы пишем там тип так а это равно вот если сравнивать и интерфейсы идти-то с помощью интерфейса мы не можем объединить реферальные типы либо например кстати и ну по идее с помощью тепла с помощью типа мы можем объединить несколько интерфейса или нет вот этих низком плюс еще раз он данный пример напишем тип там такое-то равно такой-то и такой-то и такой-то ну а мы можем тоже самой конструкцию воспроизвести через

  00:13:18 - 00:14:52

• интерфейсы через через extender на подаче марса более граммов смотрится ну чуть сложнее согласен но если какая-то прям принципиальная разница когда вот типы точно а интерфейс и тут не помогут нам ну например если мы хотим видеть несколько реферальных тип если вопрос и низом это вдруг у нас голову ударила мы хотим там типом string присвоить string ну дак объединением элементарных типов то есть как она хотим 20 string или нам про например ну и соответственно дали тиран типа совершенно верно а кстати если вы пилите

  00:14:05 - 00:15:32

• ральной типы что лучше либерально типы и нам и когда или видом и когда и нам и укатанные нам нужны какие-то константы я ужасно за собой и нам не использовала [музыка] мне нам нужны когда у нас есть какая-то зафиксированные вообще список который практически никогда не меняется тогда удобно использовать и нам и и особенно удобно когда значение у тебя ты же можешь написать типа у тебя приходит типа какие-нибудь две буквы любимцев разбега а ты можешь их преобразовать и нам который будет иметь разработчика

  00:14:50 - 00:16:17

• понятно и значение типа например там юзер статус . а тебе приходит только с богом типа апр например тут угревая пи делает вот ты можешь соответственно когда внятно преобразовать пришедший значений или числовые 01 например один оправку 0 не оправ надрез на так ты был оперировал был нулем и единицей что неудобно тебе к разработчику а так сразу читаешь это яичко а про удобно все равно принтом напиши нам я сразу подсказывает какие константы есть до 0 троллите понтов подсказать в принципе когда ты придешь ли таранить их

  00:15:36 - 00:16:51

• функциями сразу выдаст варианты только из готовых типов но вот именно преобразование значения когда там смыслового в едином и порядок лучше хорошо дженерики используем володи ты страшно ли тебе зачем нужны использовала сегодня делала не сегодня вчера дженерики это то что мы пишем т 2 угловых скобках да вчера они от сегодня я писала функцию методу был опция куда в этот получается компонент приходили разные типы для дерева для дерева из разных элементов приходили несколько на не типов интерфейс несколько значений с разными

  00:16:14 - 00:18:03

• интерфейсами так вот я сначала написала 3 функция мне нужно было проверить на 3 интерфейс вот я написала сначала на приметам ест овертон машин там принимает объектом know и возвращает объект из такой таки это вот и сегодня я потом объединяло этих 3 функция почти одинаковых одну функцию смерти я написал пишешь перед круглыми скобками theft это но можно любую букву использовать вот потом например минск от объекты возвращаем тоже там объект типа т то есть это какой-то универсальный тип мы можем потом использовать это дженерика

  00:17:16 - 00:18:57

• подставить например туда не знаю string и тогда эта функция будет работать только там со строкой мы можем котенок generic как-то граничит сказать что может за передать не все что угон отток там например массивы или только определенные интерфейс которого есть определенный свойства вообще можем радиан граничные не помню как через тоже стенд который мы упоминали да ты можешь сказать что у тебя generic некоторые т extended например другой интерфейс и любой интерфейс который будет extended этот подходит в качестве

  00:18:09 - 00:19:26

• generico просто-напросто ринга не пройдет потому что она не будет и встретить итак продолжим теперь уже паре акту это основная система готов нас осталось потому что фонд разработчик на реакции скорее пишет на реакции больше чем время назовите не станок для чего использовала о языке так сразу начали стоит чтобы [музыка] чтобы создать но создатель у нас два мы получаем несколько you stake карточные масти карт и шнур даже состояние и функцию которых состояния изменяет потом мы можем наперво использовать чтобы нам изменить

  00:18:53 - 00:20:21

• состояние мы используем эту функцию страница с теми менять и страница не странице перерисовывается этот элементом перерисовывается вот потом не эффект например чтобы отгружать к примеру какие-то данные уйдет эффекты как быть частные случаи использования подгрузки узбека вообще на что подписываешь то что дает нам эффект какие возможности не можем указать какие то зависимости и если одна из этих изменяется там и то как выполняется те функции там или что-то что мы указали в 3 говорится самый эффект стрелочным вузы

  00:19:48 - 00:21:16

• которому на передали так и совершенно верно а если мы ничего не предадим что будет если по зависимость мастер будет пустой а я совместимости в зависимости пустой только с работает один раз а если мы например в этом решили что типа вот мы при не слезая с нашего компонента не подписались нас крова мышки как нам потом отписаться в эффекте они ритер на вызвать бедным эффект можно выглядит веретен который будет вызываться при он маунти компонентов это замена старых классовых я не знаю сталкиваются с id из классов

  00:20:32 - 00:21:49

• не компонентами это компонент digma он компонент я помню когда начинаю наряд ти писать этом но у меня уже там на работе был парень который мне я у него спросил имбирем на каких нет компонентов писать классовых аллее функциональных он подпишет на классных а лучше ещё на typescript я такой осталось снять писать сталось есть признак писать на классы такой он моё вы и ютубчике нет видео почти пропала ты это нашла какого-то знаю кто винду с ней индусам был в итоге осмотрела его видео потом поняла что это а потом ради

  00:21:12 - 00:22:35

• наработаны взять и начала писать уже на хороших после такое усложнение там даже я пробовал вполне ну проба вас редакциям и там тоже такие штуки когда на классовыми когда функциональных можно вообще просто чем сделать да кстати вот есть ты спас она не работала есть короче большое преимущество например в работе с асцитом когда мы используем хуки мы можем раздробить наш большой стыд то есть раньше у тебя был классовый state он огромный она стала один совершенно верно тут это ты можешь как бы разбить на маленький устоит их от рук

  00:21:53 - 00:23:11

• хоть одно значение лежит и и пожалуйста использую его супер эти два хука разобрали но давай еще южной - callback какие нить использовал из них зачем а честно ну я использовал но больше потому что другие использовали потом я поняла что разница между ними типа и nissan в чём же разница что есть мимо он возвращает на иммунизированы и значения и из клуба их возвращать минимизированный call back если иное как я понимаю что если у нас есть какие-то данные например которые не меняются там что железо миссии в

  00:22:33 - 00:23:50

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

  00:23:11 - 00:24:42

• тяжеловесным и тогда бы страница очень долго там обновлялась перерисовки там дело номера больше холода к внешней вот моряк то есть виртуальный да он и так грубо говоря койко дом дерево избранного выпили с браузером и риан то он смотрит когда что-то изменилось в каком-то компоненте примеры состояния он сравнивает верхнем виртуальные ну дом дерево доме то в дом дерево после перерисовывает только отдельные элементы четко вот ивановым гуляли кстати когда выбирал фреймворком писали вы гуляли что нет выкину виртуальную dom дерева

  00:23:59 - 00:25:31

• интересно у них не появилась да ну нет многие фрейму рпн оборот уходит от виртуального дом дерево если взять например clt который во первых очень легкий и очень производителя он не использую на самом деле виртуальном дерево насколько я помню по моему этому съел-то ну и на самом деле там тоже как бы это решается на обычном дом дереве с без сильной потери производительности но реально можно по виртуальным дерево но что в принципе вполне себе улучшает хорошо производительность супер state менеджер какую-нибудь к будет

  00:24:45 - 00:25:58

• вообще использовала в реакции я спою я использовал recoil его 3 dax прикол а какой понравился почему фича каждого расскажи им не знаю карте recall попроще но если сильно и огниво не углублялась там что там селектора там в порядок за прославила больше людей используют она старше дольше на рынке больше не использую ну дай обыскал reduction для предложения где есть огромный внутренний state который требует внятные работы через там вызовы action это дополнительные эффекты и прочее recoil для небольших приложений

  00:25:21 - 00:26:49

• где стоит не такой огромный ты можешь спокойно его администрировать хотя вот я делал дагу продолжение чуть-чуть побольше даже хотя norecoil с этим справится на ура но многие миссия рынке вот если бы мы делали типа серым как мы работали с тобой делали компаний автомама вот там бы как раз кудри дацане как потому что там адские state и хорошо ты упоминала сесар расскажи что это чем отличается от сесар клиентского рендеринга и она получается если взять сервер сайт рендеринг то нет я не так на чем начну с

  00:26:09 - 00:27:25

• самого начала когда вы просто пишем на реакции то страничка например все мы используем это приложение браузер до страничка приходит пустая и только потом подгружается данная сборка это плохо красиво для поисковых роботов то есть они не могут и индексировать если же страничка приходит уже с данными как при сервиса это эндри на смертном жест ты берешь при создание этой страничке запрашивает там какие-то пропсы которые приходят bk и ты их уже используешь я стану тебя роботы могут индексировать этот контент который

  00:26:50 - 00:28:08

• приходит ну а кроме роботов какую-никакую какой-нибудь преимущества дает сервиса рендеринг обычному пользователю ты в принципе описала правильно процесс тук угостила одну важную деталь который влияет на производительность еще она может если может сервера данные быстрее отдаются чем не особо клинья нагружал нет они отдают итак итак он потом все равно загрузит через бандл итак итак вопрос где произойдет первичный рендр [музыка] ты правильно сказал что те быть отобразится пустая страничка но оно отобразится почему потому что еще не

  00:27:29 - 00:28:51

• подгружены данные не у тебя может быть даже джесс бандл до бремена пример загрузился у страничку все равно будет пустой исполнился он не исполнился это джесс то есть фактически тебе как происходит исполняется на сервере этом случае клиентском на абсолютно верно то есть когда буду тебя кот идет на клиента ты берешь приходите страничка приходит же с джесс мало того что должен загрузиться потом он должен соответственно раз парсится исполнится и после этого он построить себе дом дерево а на сервере у

  00:28:12 - 00:29:28

• тебя уже сервер сделал всю работу за тебя построил дом дерево и выдал тебе готовый дом дерево как + j с файлы которые потом то есть понятия гидратация когда у тебя дом дерево сырое приезжай который пришлось bk начинает гидратированный my снг из файла и она превращает полноценное предложение и вот как раз на слабых девайс если у тебя слабые старый android да да да он самый и катайся загружается этот соответственно сайт у тебя вот этот старенький android должен короче исполнить этот файл в браузере там какой

  00:28:55 - 00:30:06

• нибудь еще движке не знает чё там в андроиде браузере короче после этого все исполнить у тебя процессор начинает нагреваться живет батареи и все плохо а если те приходят просто html ну чё киева тажке мере потом ему к сожалению все равно придется сделать часть работы потому что вы распарсить джесс и обогатить этот html этот они куда-нибудь и но с точки зрения пользователя он загрузился не мгновенно рабочая страничку нет просадки вот между интерактив и тем что она делать мы поисковики да без бомба ты сейчас несмотря на то что типа

  00:29:33 - 00:30:41

• говорят что они типа исполняет не конечно этого не делают сайты просто на жизнь яндексе хорошо что лучше использовать фрагмент или div вот у тебя есть два элемента типа и ты хочешь положить в компонента у тебя компонент может вернуть всего один ребенка грег ноту не но если например тебе нужна какая-то но тебя есть я нужен какой-то элемент который будет идти на пир стиле к нему на весь тогда использовать div если тебе просто нужно чтобы эти два элемента мир отдельных то есть они могут существовать без этого

  00:30:08 - 00:31:22

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

  00:30:45 - 00:32:13

• сложный вопрос что такое хай джеком палец компоненты высшего порядка это компоненты которые в которые оборачиваются другие компоненты а и за например и которые возвращают получается ты берешь этот компонент помещаешь него компания не закат как функция не функция вот не и эта функция возвращает другой компонент react к примеру чтобы пенни за и мы там создали какой-нибудь input в этот компонент высшего порядка мы там дополнительно передаем какие-то классы которые нам нужны он возвращает уже компонент плюс эти классы и так можем

  00:31:32 - 00:33:07

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

  00:32:19 - 00:33:36

• акте мапо ты должна указать ключи от урик на тебя будет ругаться что ты ключи не указала после возврата списка мапо это кармапа в гол но по в таллине не могу получается когда он рис тогда реактор свое дерево компонента время примеру список он запоминает эти ключи если этого ключа не будет то может что-то пойти не так например у там не за если вдали там какой-то компонент нужно будет вся страница может взять на надавить другой то что он понимал какой конкретный компонент каким будет манипуляция для удаления совершенно

  00:33:02 - 00:34:22

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

  00:33:44 - 00:34:39