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