React MDL Объединяет React с Material Design Lite

Google недавно выпустил библиотеку под названием Материал Дизайн Лайт который является внешним ресурсом для разработчиков. Он автоматически стилизует любой веб-сайт, используя рекомендации по дизайну материалов с предварительно созданными CSS и JS.

Читайте также: React.js: 14 инструментов и ресурсов для веб-разработчиков

Это популярный фреймворк для простых проектов разработчиков. Реагировать MDL объединяет фреймворк Google с библиотекой React для создания всестороннего внешнего интерфейса.

Google-х дизайн материала несомненно, будущее UI / UX в мире Google. А с Material Design Lite проще, чем когда-либо, реализовать эти функции на любом веб-сайте с собственной библиотекой с открытым исходным кодом.

Кроме того, React является самой популярной JS-инфраструктурой внешнего интерфейса, используемой для компонентов внешнего вида. С React MDL вы можете объединить эти компоненты React с библиотекой MDL, чтобы получить представление, похожее на то, что вы найдете в онлайн-документации Google.

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

На этой странице не много компонентов React, но она демонстрирует эстетику дизайна материалов. Вы найдете гораздо больше действий на это демо построен с использованием компонентов React.

Вы можете найти больше информации о Material Design Lite на GitHub репо если вам интересно узнать больше. Оттуда вы можете загрузить необработанные CSS и JS для реализации на своей странице, которая автоматически поддерживает все современные браузеры и постепенное снижение производительности.

К сожалению, поскольку React MDL все еще довольно новый, он не имеет полной поддержки всех компонентов.

Но вы можете увидеть полный список здесь включая небольшие демонстрации для каждого. Это также включает в себя фрагменты исходного кода, которые вы можете копировать / вставлять в свои собственные проекты по мере необходимости.

Я бы не рекомендовал изучать React MDL, пока вы не освоитесь с обеими библиотеками.

Пакет Material Design Lite довольно прост в запуске, но React намного сложнее.

Чтобы узнать больше о MDL, проверьте Страница часто задаваемых вопросов на их официальном сайте. Он предлагает советы о том, где использовать MDL, какие функции он предлагает и как он может вписаться в типичный рабочий процесс webdev.

Но, честно говоря, даже если вы не очень хорошо понимаете React, вы все равно можете обойтись со всеми примерами на странице компонентов. Например, страница текстового поля имеет рабочие текстовые поля, используя дизайн материала, но с фрагментами кода React.

Не стесняйтесь играть и посмотреть, что вы можете построить. Обе библиотеки абсолютно бесплатны и открыты для всех проектов, как личных, так и коммерческих.

Вы можете узнать больше из Реагировать на страницу MDL GitHub если вы хотите изучить источник и погрузиться в.

Читайте также: Начало работы с React.js