ReactJS Junior // Співбесіда наживо // Анастасія Романюк // S2E1

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ก.ค. 2024
  • Онлайн співбесіда наживо рівня Junior ReactJS з Анастасією Романюк - переможницею першого випуску нового проєкту "Резюме Ґриль" від ‪@juniverse_ua‬. Загальна теорія, питання з React та практичні задачі на уважність.
    ***
    Анастасія прагне стати веброзробницею, і заради цієї мети активно вчиться та пройшла інтенсив fullstack developer вд однієї з компаній, а тепер потрапила до мене, отримавши нагоду перевірити свої знання та навички. Чи вдасться їй? Чи зможе вона гідно відповісти на усі хитрі запитання та розвʼязати заплутані задачі?
    ***
    Анастасія Романюк - / anastasiia-romaniuk-7a...
    Анастасія Гордєєва - / anastasiia-hordieieva-...
    Стаття про React Context - / react-context-all-you-...
    ***
    00:00:00 Вступ та знайомство
    00:03:09 Що відбувається після натискання на посилання?
    00:05:18 Чим відрізняється display:none від visibility:hidden
    00:07:20 Як застосувати стилі тільки до елементів з парними індексами?
    00:09:50 Практики використання CSS Grid та CSS Flexbox разом
    00:13:50 Чим відрізняються cookies, sessionStorage та localStorage?
    00:17:36 Що таке DOM? Як він взаємодіє з JavaScript?
    00:21:29 Як можна перебрати масив?
    00:24:35 Що таке Promise, яку задачу він дозволяє вирішити?
    00:28:00 Що таке JSX і для чого він використовується у React?
    00:30:49 Що таке компонент у React?
    00:32:39 Що таке стан (state) та пропси (props) в React?
    00:38:15 Що таке контекст у React і які проблеми він допомагає розв'язати?
    00:43:52 Що таке хуки в React? Наведіть приклади декількох хуків.
    00:50:55 Що таке віртуальний DOM і як він працює?
    00:53:28 Як можна організовувати стилі у React-застосунках?
    01:00:26 Задача: неправильне оновлення стану
    01:01:40 Задача: useEffect, залежності та cleanup
    01:11:25 Задача: useEffect, асинхронність
    01:17:07 Задача: умовний рендеринг
    01:21:19 Задача: обробка помилок, оновлення стану, рендеринг з масива
    01:30:08 Фідбек від Анастасії Гордєєвої
    01:46:45 Заключення

ความคิดเห็น • 78

  • @babichweb
    @babichweb  4 หลายเดือนก่อน

    Я нарешті провів розіграш. Перевірити чи ви виграли, якщо брали участь, можна за цим посиланням: www.random.org/draws/details/?draw=226555
    Розіграш відбувався за імейлом.
    Правильна відповідь на питання від мене - 0.3.0 )

  • @olexandrstadnik6877
    @olexandrstadnik6877 5 หลายเดือนก่อน +19

    Я не знаю як це працює, але коли Сергій каже припиняй нервувати, я починаю нервувати

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Се таке магічне заклинання

  • @Kat15SG
    @Kat15SG 5 หลายเดือนก่อน +7

    Дякую за інформативне відео! Експертка Анастасія - вогонь ❤️‍🔥

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Дякую за відгук, приходьте ще )

  • @joter-glem
    @joter-glem 4 หลายเดือนก่อน +1

    Як починаю згадувати свої інтерв'ю, то згадую одну пораду, що інтерв'юєри бувають технічні та практичні. Я хвилююсь більше ніж апонент у відео. Дякую за такі відео.

  • @user-gc1up4yy2h
    @user-gc1up4yy2h 5 หลายเดือนก่อน +2

    Дуже крутий контент! дякую. Ваша подача надзвичайно цікава

  • @oleksandrHlinskyi
    @oleksandrHlinskyi 4 หลายเดือนก่อน +3

    Дякую за гарний та корисний контент! Вкотре з задоволенням дивлюсь та ставлю на паузу перед відповідю інтерв'юера. Настя Романюк--- молодець, успіхів! Анастасія Гордєєва - все по факту, пам'ятаю етер з нею. Було дуже цікаво !

    • @babichweb
      @babichweb  4 หลายเดือนก่อน

      Дякую дуже за відгук!

  • @nataliaa2858
    @nataliaa2858 4 หลายเดือนก่อน +1

    молодець Анастасія!❤

  • @user-ol8bf8vn4r
    @user-ol8bf8vn4r 4 หลายเดือนก่อน +2

    Молодець, Настя❤❤❤❤

  • @allakaplia
    @allakaplia 5 หลายเดือนก่อน +3

    Крутий ефір, дуже сподобалось, як трималась Анастасія, молодчинка🤗

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Дякую)

  • @anastasiaaaa5555
    @anastasiaaaa5555 5 หลายเดือนก่อน +3

    Співбесіда топ, і експертка цього разу - просто вогонь 🔥 Настільки гарно, структуровано і професійно поданий фідбек. Хотілося б собі такого ментора))

    • @AI-su3ds
      @AI-su3ds 5 หลายเดือนก่อน +1

      захотілось до неї на співбесіду)))

  • @ggo_webdev
    @ggo_webdev 5 หลายเดือนก่อน +2

    треба спробувати казати людині щоб хвилювалась ще більше, щоб пішов супротив з іншого боку і заспокоєння😃

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Треба спробувати)))

  • @user-zg7ss7ri1t
    @user-zg7ss7ri1t 5 หลายเดือนก่อน +3

    Настя молодець, гарні відповіді, душний експерт - молодець, гарний фідбек, Бабіч - все стабільно)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Цьом у лобіка за комент )

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      А Бабіч стабільно молодець чи душний?)

    • @user-zg7ss7ri1t
      @user-zg7ss7ri1t 5 หลายเดือนก่อน +2

      @@babichweb 2в1)

  • @Skvdev
    @Skvdev 5 หลายเดือนก่อน +1

    Дякую за наглядний приклад гарних hard skills, але коли загубили soft 🎉

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      А ти аж настільки впевнений, що маєш всі софт скіли?

    • @Skvdev
      @Skvdev 5 หลายเดือนก่อน +1

      Ні, я їх немаю
      Але не покличеш, не дізнаєшся.
      Я написав коммент не з метою образити розробницю, перший крок вирішення проблеми - її розуміння!

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Угу

  • @yuroon7811
    @yuroon7811 5 หลายเดือนก่อน +4

    Комент в підтимку кандидатки і душного Бабіча)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Душний Бабіч душно дякує!

  • @VENOM-rl5eo
    @VENOM-rl5eo 5 หลายเดือนก่อน +2

    Дуже круто проводиш співбесіди Сергію, практично кожну співбесіду твою переглядав. Анастасія марно сумнівалась в собі, вона добре підходить я вважаю під програмування.

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Дякую за відгук, дуже приємно )

  • @bessuka
    @bessuka 3 หลายเดือนก่อน +1

    Моя проблема в тому шо я майже завжди забуваю ставити лайки, глянув відос, сподобалось, закрив і пішов далі. Не будьте як я, ставте таким відосам лайки!

    • @babichweb
      @babichweb  3 หลายเดือนก่อน

      Дякую)

  • @user-lc8kx6le2x
    @user-lc8kx6le2x 5 หลายเดือนก่อน +5

    Оце реальність - люди не використовували queryselector… Веб такий мінливий)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Життя бентежне)

    • @max_snischuk
      @max_snischuk 5 หลายเดือนก่อน +1

      Можливо, вона не хоче лишній раз дьоргати дом, тому зразу зберігає ноди при createElement

    • @ko3ak112
      @ko3ak112 3 หลายเดือนก่อน

      Я вчу веб-розробку рік. Дуже впевнено знаю реакт, трохи вью і я юзав кверісклектор та гетелементбайайді. Просто дівчинка дуже слабенька, навіть супер нульовий трейні знає що таке мемо наприклад

    • @babichweb
      @babichweb  3 หลายเดือนก่อน

      @@ko3ak112 готовий довести свої знання в прямому етері?

  • @cetus_c
    @cetus_c 5 หลายเดือนก่อน +2

    1:29:00 Тут скоріше немає помилки. Помилкою було б використати "todo" замість "index", бо немає гарантії що todo буде унікальним (вільний input). Дублікат призведе до warning'у "Each child in a list should have a unique key" з подальшими проблемами. Але й іншого ідентифікатору крім index тут немає. Більш того, порядок в списку не змінюється, тому index цілком ок в даному випадку.

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Я також зазначаю, що index швидше не рекомендується, аніж є помилкою. Тим не менш.

    • @infoinfo8640
      @infoinfo8640 5 หลายเดือนก่อน +1

      @@babichweb з index було, на мій погляд, підступно ) Якби було описано структуру todo-шек і там була ідешка, тоді би да. а так.... Звісно, фактично якщо джун зверне увагу, що використовуєть індекс масиву і це некомільфо, що краще використовувати більш стабільні ідентифікатори - це однозначно в плюс. Але для джуна мабуть більш принципово щоб взагалі не забув про key. Може був би сенс зробити побудову 2-х списків і в одному просто забути key і спробувати "розгорнути" відповідь? Я, чесно кажучи, переглядаючи перший раз не звернув уваги що там в ключах - є ключ і норм. А вже при 2-гому задавася собі питанням, а чого там індекс? а чи є взагалі в todo ідентифікатор? ну і т.п. :) В цілому сподобалося, але тут багато суб'єктивізму, як в будь-якій співбеседі... Якісь питання глибокувато (типу як посилається запит до серверу - і тут не дуже відомо як глибоко розповідати, чи треба про DNS казати чи ні? А може щей непогано статуси назвати і розповісти всю послідовність? ), а якісь навіть для джуна поверхнево (наприклад методи перебору масивів - як на мене основи JS і тут непогано би попитати поглибше).. Але ж тут суб'єктивно залежить від інтерв'юєра - що він важає за "головне". В цілому, манера проведення співбесіди мені імпонує: приємно, спокійно, без нервів. позитивно :) Сергію, Ви молодець :) оО! А ще мені сподобалося, що Ви, Сергію, не тільки запитуєте, але і по ходу навчаєте, даючи правильні відповіді (як приклад async в useEffect ;) ).

    • @babichweb
      @babichweb  5 หลายเดือนก่อน

      Дякую за відгук! Так, в цьому сенс цих етерів - не лише питати, а я й розказувати. Ну а щодо задач, то на те вони й задачі на уважність )))

    • @ko3ak112
      @ko3ak112 3 หลายเดือนก่อน

      Друзі, запамʼятайте, якщо не знаєте що вставити замість ключа (сумніваюсь що у комерції вам бек віддасть обʼєкти без айді), використайте хук useId()

  • @AI-su3ds
    @AI-su3ds 5 หลายเดือนก่อน +2

    Сергій неодноразово повторює "Готова? Заспокоїлась?", наче спеціально... від цього людина навпаки нервувати починає

    • @babichweb
      @babichweb  5 หลายเดือนก่อน

      Так, я спеціально її нервую

  • @viiseventh1157
    @viiseventh1157 5 หลายเดือนก่อน +1

    Буду вдячний за LinkedIn Анастасії(експерта)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      додав до опису відео

  • @user-dw3gj1iu4g
    @user-dw3gj1iu4g 5 หลายเดือนก่อน +2

    Як потрапити на таке iнтервью?

    • @babichweb
      @babichweb  5 หลายเดือนก่อน

      Слідкувати за анонсами в телеграмі та Лінкедині і набратися терпіння. Наступний набір заявок відбудеться аж на третій квартал цього року.

  • @readyto502
    @readyto502 5 หลายเดือนก่อน +2

    Сергій, як попасти до вас на інтерв'ю?)))

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      Слідкувати за анонсами в телеграмі і Лінкедині ) Але зважайте, шо в телевізор вийде попасти не раніше третього кварталу.
      Приватним же чином можна домовитись, звичайно ж платно.

    • @readyto502
      @readyto502 5 หลายเดือนก่อน +2

      @@babichweb В мене немає мети попасти в телевізор))) Просто вже не перше інтерв'ю дивлюсь і зрозумів, що хочу спробувати свої сили. Тим паче, що я як і Анастасія шукаю роботу на позицію ReactJS Junior Developer.

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Напиши з тижня, обговоримо

    • @readyto502
      @readyto502 5 หลายเดือนก่อน +2

      @@babichweb Добре, дякую. Гарного вечора 😉

  • @sdwvit
    @sdwvit 5 หลายเดือนก่อน

    /душніла-он не знаю чи це дійсно співбесіда на джуна, схоже більше на екзамен в кінці курсу по фронтенду в універі /душніла-офф

    • @sdwvit
      @sdwvit 5 หลายเดือนก่อน

      але бачу народу заходить, тому як контент - топчик)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน

      Там експертка в кінці слушно зауважує, що мої співбесіди про розкриття слабких і сильних сторін. І я з нею в цьому цілком погоджуюсь.
      Бо я не можу робити співбесіди, максимально наближені до реальних, їх ніхто дивитись не буде.

    • @victormusienko8001
      @victormusienko8001 5 หลายเดือนก่อน

      @@babichweb справедливо!

  • @antonantonov1638
    @antonantonov1638 5 หลายเดือนก่อน

    Бабiч, так я не зрозумiв, душнити в коментах можна чи так ?)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Можна, але не до кандидатів

  • @user-md4mg2vg5j
    @user-md4mg2vg5j 5 หลายเดือนก่อน +1

    Йой так легко відповісти на питання, що відбувається коли клацаєш на посилання. А де dns osi і т.д. про рівні протоколів я вже мовчу

    • @hordieieva
      @hordieieva 5 หลายเดือนก่อน +1

      Пхахах

    • @babichweb
      @babichweb  5 หลายเดือนก่อน

      От і добре

    • @user-md4mg2vg5j
      @user-md4mg2vg5j 5 หลายเดือนก่อน

      @@babichweb можливо, я щось не дуже розумію, але то реально так легко? Реакт вчиться за 2 тижні. Мені аж самому цікаво. Чи я здам на трейні після 2-ох тижнів навчання. Можна зробити челенжд.

    • @user-md4mg2vg5j
      @user-md4mg2vg5j 5 หลายเดือนก่อน +1

      Пропоную челенж. Я с++ розробник. Я за 2 тижні здаю на джуна з фронтенд. А потім ви за той термін який схочите здаєте мені на с++ трейні.)) То буде весело)))

    • @max_snischuk
      @max_snischuk 5 หลายเดือนก่อน +2

      А як би ти відповів?

  • @hordieieva
    @hordieieva 5 หลายเดือนก่อน +3

    Душний експерт!

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +1

      МАК-СИ-МАЛЬ-НО!

    • @andrewtang8249
      @andrewtang8249 5 หลายเดือนก่อน +1

      Експерткиня, вимбачте)

    • @babichweb
      @babichweb  5 หลายเดือนก่อน +2

      Експертка, попрошу!

    • @andrewtang8249
      @andrewtang8249 5 หลายเดือนก่อน

      відкрийте форточку@@babichweb

    • @max_snischuk
      @max_snischuk 5 หลายเดือนก่อน +3

      Шо ж то за легендарна стаття про контекст?
      Ділись уже зі всіма)

  • @user-gc1up4yy2h
    @user-gc1up4yy2h 5 หลายเดือนก่อน +2

    Дуже крутий контент! дякую. Ваша подача надзвичайно цікава