UI бібліотеки в React
2022 ж. 18 Жел.
943 Рет қаралды
💪 Ви можете написати будь-який код, від математичного модулю до складної таблиці з групуванням, підвантаженням даних з серверу та віртуальним скролом. Але часу на це може піти більше ніж на сам проект та й баги ніхто не відміняв.
👉 Тому цю лекцію ми присвятили UI бібліотекам які можуть суттєво пришвидшити та спростити розробку застосунків на React.
💡 Код до лекції: github.com/ITsvetkoFF/ui-lib-...
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
Storybook з backlog прямо в точку) Дякую за хороший контент!
Дякую, як завжди корисно, є над чим подумати. У прикгладі з одним компонентом tailwind виявився важким. Та виникло питання, чи в контексті цілого застосунку він може виграти по вазі, т.я. ми перевикористаємо класові юніти і після збірки він залишить тільки ті юніти якими ми користувались?
Так, це одна з переваг tailwind. Через певний час, розмір CSS бандлу залишається стабільним оскільки використовуються одні й ті самі класи. Але читати розмітку досить складно, особливо коли потрібні селектори до siblings або такого типу.
Добрий день, а можно в MUI встановити не повністю всю лібу, а тільки окремі компоненти, які потрібні, наприклад SnackBar?
Частково. Імпортуючи перший компонент ви також імпортуєте додатковий код бібіліотеки, але хоча б не зайві комопненти
Даруйте, пропустив початок. Що таке Сторібук і нахіба він треба?
Це популярний інструмент, який дозволяє візуалізувати ваші компоненти та зібрати їх у колекції. У великих проектах слугує документацією для розробників (щоб не питати у колег "а чи є нас select який вміє працювати з бекендом) та шпаргалкою для дизайнерів.
@emoution це двіжок, його можна використати, але це не правильно, MUI надає API для використання "styled", якщо ми описуємо так як в styled-components) 1:20:00 для прикладу: import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; export const Loade = styled(Box)(({ theme }) => ({ zIndex: theme.zIndex.loader, background: theme.palette.background.default, position: 'absolute', top: 0, left: 0 ... }));
Подскажите пожалуйста как решать вопрос мертвого css при таких подходах. К примеру у меня 10 типов кновок, а на сайте я использую 2. 80% стилей не задействованы? Я правильно понял?
В загальному вигляді це питання не вирішується. А в індивідульному порядку кожен вирішує або не вирішує по своєму. Наприлкад tailwind: оскільки ви просто використовуєте класи які вже існують в бібліотеці то через певний час розмір вашого CSS зупиниться. І сам Tailwind вміє видаляти не використані класи
Добрый день, можете прокомментировать это видео Is TurboPack really 10 times faster than Vite???? Turbopack vs Vite шё на ютубе. Турбопак можно уже юзать или оно еще сырое. Экстеншинов под него почти нет! Если он действительно такой крутой как про него говорят, можете показать и рассказать как писать под него экстеншины и конфигурировать этот сборщик.Интересно было бы послушать про вебпак, но я не уверен, шё он на сегодняшний день актуален.
А як використовувати керування клавіатурою на смартфоні?
Ніяк, там але там можуть бути рідери, тому accessibility для смартфонів також буде корисним
@@reactdev Можно только на React Native, например, можно создать адаптивную клавиатуру для IOS
Можете в гугле забить статья называется How to make your React Native app respond gracefully when the keyboard pops up
Дякую, ще би тайм-коди були корисні.