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