Пиши КОМПОНЕНТИ як SENIOR | React Compound Component Pattern
Ғылым және технология
#frontend #development #react
Привіт, я Нік і ти на каналі Dev Routine!
Посилання на проект з відео: github.com/SemX74/compound-co...
Стеж за нами в телеграмі: (Корисні пости і меми): t.me/+giZ-rijhq7BiZGEy
Дивись наш тікток: / dev.routine
Лайк та коментар, якщо відео було тобі корисно!
Таймкоди:
0:00 - Інтро
0:20 - Вступ
1:07 - Пояснення проблеми
2:02 - Рефакторимо компонент
9:00 - Заключення
Пікірлер: 138
Дякую за tutorial, лишень не встигав зрозуміти, треба ще раз подивитись для усвідомлення.
@vladyslavbrataniuk1324
24 күн бұрын
правда, зазвичай приходиться дивитись подібні відео на 1.25-1.5, а тут навпаки - 0.75)))
Хтось полайкав, хтось покритикує🤭: 1. За вставки 25 кадр вже писали 2. Деколи буває закінчення слів проковтуюиься, доводиться витрачати додаткові зусилля на вслуховування, щоб точно усі слова розібрати. Можливо локальна особливість мови 3. Клавіатура звучить ближче і тарабанить високими частотами по вухах 4. Рот від мікрофону дуже далеко, через це мікрофон захоплює кімнату (в т.ч. клаву), що звучить не дуже приємно, до того ж голос втрачає в розбірлмвості і тембрі
@itsDevRoutine
26 күн бұрын
Мікрофон новий купили, вставки пофіксимо, дякую за комент!🙌
Будуть ще розгляди патернів?)
Дуже гарно розповідаєте, маєте до цього неабиякий хист, мені дуже подобається, лайк, підписка і респект) продовжуйте ділитися чимось цікавим)
Ого, оце якість і багато нового дізнався і подача хороша. Підписка, лайк.
Нік із каналу Dev Routine мій улюблений it блогер!
@itsDevRoutine
Ай бұрын
😂❤️
Дякую за контент, використовуємо такий стиль написання компонентів в Ui бібліотеці, зручно.
Дуже круто, продовжуй!
@itsDevRoutine
Ай бұрын
дякую🙌
Дякую за цікавий контент
Дякую за годний український контент!
@YuraKarpovich
24 күн бұрын
"не лишє", а зайве
Відверто - норм-лайк!) Така невеличка стаття на пару хв, що продемонстрована автором у відео дуже якісно!) Для себе знайшов ComponentPropsWithoutRef. Постійно махався з TS і получалось недуже 🥲А хотілось зробити саме так. Дякую!)
@itsDevRoutine
29 күн бұрын
Дякую!
багато зауважень... подивись як проектують компоненти у топових UI лібах і пробуй робити так само... видно, що трохи шариш, але писати в заголовку клікбейт ал-ля "пиши як сіньйор" то можна і на критику відповідну нарватися )) ну не дотягує тут на сіньйора... це банальний до болі простий приклад... на сіньйора треба брати якусь складнішу тасочку... Popover візуально по UI виглядає не так... це більше смахує на Dropdown... + console.log('hello') замість того, щоб описати нормальну подію і прокинути наверх - це точно по-сіньйорськи ))) ps; продовжуй у тому ж дусі і колись будеш писати як сіньйор )) 😜
@itsDevRoutine
29 күн бұрын
Дякую за коментар! Насправді сам розумію що не дотягнув в багатьох моментах + можна було б ускладнити, бо аж надто мало логіки. Клікбейтити погано але в кінці кінців можливо через таку назву люди у яких є більший досвід можуть дати якісь поради ну і піддати відео критиці (я це сильно ціную) P.S. Роботу над помилками зробимо, буду старатись краще)
@Clo2n
24 күн бұрын
> топових UI лібах скинь, будь ласка, посилання на компонент з топових ліб, який на твою думку гарно написаний
Раджу контент фуйлу readme в репо замінити на щось більш актуальне до теми
Відео трапилось у рекомендаціях, побачив про ІТ українською, дивлюсь із задоволенням. Канал невеличкий, але думаю, що своя аудиторія прийде. Автору сил і вдачі!
@itsDevRoutine
29 күн бұрын
дякую ❤
Вже злякався, що сотий раз доведеться передивлятись "php за 5 хвилин" за сніданком, але мій сніданок був врятований Ніком. За відос подякував! І, що не менш важливо, поснідав!
@itsDevRoutine
Ай бұрын
все для вас😂❤️
Та є декілька порад: 1) замість ...rest краще писати ...props 2) замість бібліотеки classnames використовуй clsx, це теж саме, але менше важить, тож краще 3) не обов'язково обертати компонент в тег div. Можна використовувати і не смітити тегами. Це теж хороший підхід. В даному випадку з тег div взагалі не потрібний
@itsDevRoutine
29 күн бұрын
Дякую! Взагалі все знав але дякую за поправки, спішив) А на рахунок classNames я вже й сам його не використовую, а роблю поєднання clsx & twmerge, тоді люта імба получається
@user-yk6iq5hn4d
29 күн бұрын
@@itsDevRoutine Крутяк. Підхід вогонь, я теж так роблю з невеликими змінами. Спробуй колись підхід з папкою src/shared/conponents/SomeComponent де лежать компоненти, які будуть використовуватися як конструктор. Це в цілому теж саме, але без assign'ів, поки не можу сказати як краще. Твій варіант вогонь, але треба пробувати на практиці, коли потрібна буде більша гнучкість
Ще в ідеалі зробити 2 контексти для того щоб зайвий раз не відбувався рендер і обєднати їх, один для хендлерів другий для змінних які(ий) хендлер трігерить і відповідно імпортувати різні в потрібні місця. В цілому такий підхід як на відео актуальний для написання кастомної бібліотеки з великою кількістю компонентів та їх варіацій, в іншому MUI або аналогів з базовою кастомізацією достатньо з головою...
@itsDevRoutine
29 күн бұрын
Хороша ідея! Подивимось що принесе реакт 19, можливо не потрібно буде паритись за подвійний контекст ітд. В кінці кінців це стосується не тільки поповерів ітд а загалом одним із способів структурування компонентів які якимось чином повʼязані між собою😄
Для Тейлвінду краще використовувати не classNames або clsx, а tailwind-merge. Він краще працює з об'єднанням классів саме тейлвінда (при опціональних класах ці ліби можуть некоректно заміщати класи). До того ж, tailwind-merge пропонує багато інструментів для работи з конфігом тв.
@barneystinson2041
24 күн бұрын
а ще краще clsx+tw-merge = cn()
Раз на рік і рекомендації ютюб нормальний контент підкидають! Просто супер жирний плюс за якісний український контент! Лайк і підписка!
@itsDevRoutine
29 күн бұрын
дякую!❤
В місцях з вставками коду як на 1:05 нічого не можна розгледіти. Роби їх трохи довше на єкрані?
@itsDevRoutine
29 күн бұрын
Будемо працювати над цим
По ідеї, на заміну classnames вже є легша drop-in альтернатива clsx
@itsDevRoutine
25 күн бұрын
є) просто проект досить старий і вже юзав те що є, в новому відео буде нова ліба
От чортяка, а це вражає Однозначно лайк
Дякую, що є посилання на репо
давай відос про архітектуру проектів на реакт
Слушай, а пиздатый подход 😮
Привіт, дякую за таке інформативне відео. Поділися будь ласка, чи плануєш випускати відео по Next.js?
@itsDevRoutine
29 күн бұрын
Так, але сам планую краще розібратись в ньому, тільки відносно недавно почав працювати на app роутері
Ти крутий! Дякую за якісний контент українською!
Класний контент, чуваче! Продовжуй знімати корисні штучки.
@itsDevRoutine
26 күн бұрын
дякую!
Супер. Я наче намагаюся якось чистенько робити, але згодом спостерігаю смітник в компонентах.
@itsDevRoutine
27 күн бұрын
з часом все буде вийде!)
харош
@itsDevRoutine
Ай бұрын
😎
Щей українською, топ! Підписочка)
дякую за корисне відео!
@itsDevRoutine
29 күн бұрын
Дякую за коментар! Слідкуй за новими відео🤠
Друже, чудове відео! Придумай, буль ласка, щось зі звуком, щоб звуки клавіатури так по вухах не били... дякую!
@itsDevRoutine
29 күн бұрын
В процесі покупки мікрофона, вибач що приходиться таке слухати(
Дякую, лайк підписка. Але було б цікаво подивитись якісь уроки, як більш детально то робити, які проблеми вирішує і тд)
@itsDevRoutine
29 күн бұрын
Вже на етапі монтажу зрозумів це Вчимось на помилках, в наступних відео буде більше лірики на рахунок цього)
Дуже круте відео, продовжуй в тому дусі.А з redux toolkit цей підхід так само працює?
@itsDevRoutine
29 күн бұрын
Дякую! Питання трішки не зрозумів, можеш пояснити?
@romanroki7528
29 күн бұрын
@@itsDevRoutine ну я маю на увазі якщо замінити context на redux toolkit буде так само працювати?
@itsDevRoutine
29 күн бұрын
@@romanroki7528 redux це глобальний store, він не підійде для цієї штуки та й немає сенсу його так використовувати
Не багато українського контенту в сфері фронтенду. дякую)
@itsDevRoutine
27 күн бұрын
🙌
Молодець!
Не багато українського контенту в сфері фронтенду Дякую за твою працю! Лайк авансом :)
@nemec980
27 күн бұрын
А яка в тебе тема у vs-code?)
@itsDevRoutine
27 күн бұрын
@@nemec980 Дякую за підтримку! Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)
const Popover = Object.assign(PopoverComponent, { Button: PopoverButton }) === PopoverComponent.Button = PopoverButton
@itsDevRoutine
29 күн бұрын
В деяких сетапах може бути помилка в ts в такому випадку
Лайк, підписка)
Гідний і сучасний контент! Дякую. Прям нагадало примітиви Radix. 🤙
@itsDevRoutine
28 күн бұрын
дякую!
Класна якість, знімаєте на камеру телефону?
@itsDevRoutine
24 күн бұрын
Є фотоапарат)
@OstapBrehin
24 күн бұрын
@@itsDevRoutine який?)
@itsDevRoutine
24 күн бұрын
@@OstapBrehin це якийсь старенький Canon EOS 60D, взагалі не для відео але я якось рятую ситуацію 😂
топ контент
nice
Дуже якісно
@itsDevRoutine
29 күн бұрын
дякую
Чому не юзаєш диструктуризацію?
@itsDevRoutine
28 күн бұрын
Де саме
Нету в бэте 19 версии реакт помпилятора, и добавят его не известно когда
@itsDevRoutine
26 күн бұрын
буде)
о ура про react укр
@itsDevRoutine
28 күн бұрын
🥳
О файно
можна вставки коду на 0.001 сек зробити? бо дуже встигаю все роздивитись
@itsDevRoutine
29 күн бұрын
можна😁 А взагалі ті вставки не несли ніякого важливого сенсу, і вже потім зрозумів, що дійсно розгледіти їх дуже важко (якщо відео тільки на паузу не поставити) Будемо виправляти😜
@alexp3617
27 күн бұрын
@@itsDevRoutine все ок дякую відео класне ) вставки теж топ даже стопнуть не встиг :)
А нащо Object.assign? Чому не просто export default { ... , .... , ... } ?
@itsDevRoutine
29 күн бұрын
Можна, але таким чином ми обмежуємось тільки одним імпортом, та групуємо ці компоненти. В нас виходить єдиний неймспейс: Popover.Button Popover.List
@GazdaZuBB
27 күн бұрын
@@itsDevRoutine А хтось заюзав тільки 2 із 3х твоїх компонент, а із-за 1 штучно створеного неймспейсу в тебе трішейкінг якраз його і не викине
@GazdaZuBB
27 күн бұрын
@@itsDevRoutine економити на імпортах така собі ідея. потім бандлер все як треба змерджить і буде економія.
@itsDevRoutine
27 күн бұрын
@@GazdaZuBB Ну по-перше я не думаю що хтось буде використовувати подібний компонент без кнопки, ліста або або кнопки всередині поповера (або меню), бо один без одного вони не можуть функціонувати. Також такий паттерн юзають в дуже популярних лібах і туди пхають далеко не такі простенькі компоненти, у яких різниця бандлу буде (якщо вже таки щось пішло не так) мізерна. І на кінець я просто показав який є варіант робити компоненти :) А стосовно імпортів, то все-таки якщо є можливість імпортити один якщо вони всеодно всі використовуються, то чому б нею не скористатись?
+ 1 в полк shadcn
підписався!
@itsDevRoutine
29 күн бұрын
дякую!
Вроде как React-bootstrap так и делает напримере его компонента аккордиона..
@itsDevRoutine
27 күн бұрын
Так роблять багато ліб, наприклад react/headlessui
Такий крутий SENIOR що на превʼю фото не передав key проп компоненту
@itsDevRoutine
25 күн бұрын
Я не претендую на "крутого senior-а", хто тобі таке сказав?) btw превʼю в прод не піде, обіцяю😉
что это за язык? Яндекс.Браузер не справляется с переводом
@itsDevRoutine
28 күн бұрын
джаваскріпт друже
🥰🥰🥰🥰🥰
Хм, і нашо я подивився, якщо я не пишу на реакті)
@itsDevRoutine
28 күн бұрын
Це поки що😁
icon в arc то за одного запрошеного?
@itsDevRoutine
29 күн бұрын
так)
крутий патерн
@itsDevRoutine
27 күн бұрын
Згоден
Брат умоляю що за шрифт в ВС КОД хочаЮЗАЮ ВЕБШТОРМ АЛЕ СКАЖИ ШРИФТ АПУПЕНИЙ ПЖ БРО
@itsDevRoutine
29 күн бұрын
"Fira Code"
скріні з кодом занодто коротко по часу показуються
@itsDevRoutine
26 күн бұрын
Так, більше такого не буде Хоча там всеодно не було нічого важливого
сложно😬
Оуу шиит, крутезний відос. Не знав про такий спосіб написання ui, виглядає бомбезно, буду юзати Дякую!
Не фанат реакту. Я бекенд. Інколи щось малюю на ангулярі. Але так хотілося би, щоб такі відосики були по ангулярі
@itsDevRoutine
27 күн бұрын
не фанат ангуляра(
Tutorial how to how to
чудовий патерн. вже знаю де використати
Я хочу від тебе дітей
@itsDevRoutine
17 күн бұрын
😆
оце ти гудиш дядя. Я хз, хоча б еквалайзером прибирай зайві частоти на відосі
@itsDevRoutine
25 күн бұрын
😁👌
Як сеньйор? Ти про що? Зараз ти пишеш як випускник goit. Не треба вчити людей такому.
@itsDevRoutine
26 күн бұрын
Навчи ти краще
Хз брат побачив превю. видос потом посмотрю но Вижу короче ПРЕВЬЮ. X.firstname X.lastname превью очень п№;датое реально топ выглядит как то завлекло красавчик/ Реально как то превью завлекло Будто буквой Х Короче подписался поставил лайк (посмтрю позже) Я сам со Львова незнаю почему по руски пишу а ти красавчик брат ПРЕВЮ респект
@itsDevRoutine
29 күн бұрын
😂❤
Цікаво, підписка.
Дякую за контент, використовуємо такий стиль написання компонентів в Ui бібліотеці, зручно.
топ контент
@itsDevRoutine
27 күн бұрын
дякую