react ui interactions Скачать

react ui interactions

Сторонние компоненты

1.0.0

Скачать

Пользовательский вдохновение для реагирования

Реагировать взаимодействие пользовательского интерфейса

Коллекция концепций пользовательского интерфейса, упакованная в набор небольших проектов реагирования. Идея заключается в том, чтобы использовать новейшие практики сообщества, чтобы обеспечить полезные шаблоны для вашего реального проекта. Представляя конкретные элементы пользовательского интерфейса, вы изучите основные и передовые решения, охватывающие: анимации и переходы, микроинтерации, отзывчивость, навигация, извлечение данных, манипуляции с состоянием .

Мотивация

Создание веб -приложения требует решения многих задач пользовательского интерфейса. Существует множество библиотек, которые помогают решить пробную оболочку, но очень часто вы придумываете свое собственное решение. В этом случае этот репозиторий позволяет вам обнаружить полезные шаблоны для типичных задач при работе над пользовательскими интерфейсами. Как вы, наверное, заметили, проект написан в React. Я просто чувствую себя комфортно, используя это. Тем не менее, я думаю, что представленные здесь решения могут быть успешно использованы в других компонентных рамках.

Принципы

Direct - охватывает явный и совместный код, который легко удалить и перемещаться из одного места в другое. Это оптимизация для изменений, так как изменение - это то, что в конечном итоге произойдет. Код является прямым и конкретным, что позволяет легко копировать и адаптировать ваши потребности.
? Простой - единственный способ достичь гибкости - это сделать вещи настолько простыми и легко изменившимися, насколько это возможно. После роста "худшего лучше"
Дизайн должен быть простым, как в реализации, так и в интерфейсе. Для того, чтобы интерфейс был более простой, чем реализация.
? Нет классов - только функциональные компоненты.
❣ Крюки - используют крючки на всем протяжении (доступны как React 16.7.0 -Alpha).
? Кодовое разделение - использует React.lazy вместе с import() и позвольте WebPack выполнять работу.
⏱ Susepress - React Sustesse для разделения кода.
? CSS-In-JS -он основан на стилизованных компонентах для внешнего вида.
? Продвигайте по умолчанию - как можно меньше конфигурации. Использует значения по умолчанию, где бы он ни мог.

Как использовать

Просто скопируйте и вставьте все, что вам нужно.
Быть вдохновленным. Найдите решение пользователя, которое вам нравится, и адаптируйте его к окружающей среде.

Зависимости

Важно отметить, что некоторые задачи низкого уровня по -прежнему нуждаются в библиотеках, чтобы сосредоточиться на более важных аспектах. Все зависимости в этом проекте были выбраны очень тщательно, учитывая принципы, упомянутые ранее.

Reach Router , потому что он прямой, композиционный и делает непосредственно то, что должен. Больше ничего.
Styled Components просто CSS в JS с отличной документацией. Почему не emotion ? Я не знаю. Если есть причина, о которой я должен знать, дайте мне знать!
React Spring поскольку современный пользовательский интерфейс часто основан на значимых анимациях, все, что поощряет их использование, является великолепным. В последнее время библиотека предлагает хороший API Hooks, который играет непосредственно с DOM для лучшей производительности.