Reagir Mescla MDL Reage com Material Design Lite

O Google recentemente lançou uma biblioteca chamada Material Design Lite, que é um recurso de frontend para desenvolvedores. Estilos automaticamente qualquer site usando as diretrizes de design de material com CSS pré-construídos e JS.

Este é um framework popular para projetos simples de desenvolvimento. Reaja A MDL combina a estrutura do Google com a biblioteca React para criar um recurso de frontend bem-arredondado.

Design de material do Google é claramente o futuro da interface do usuário / UX no mundo do Google. E com o Material Design Lite é mais fácil do que nunca implementar esses recursos em qualquer site com uma biblioteca proprietária de código aberto..

O React também é, de longe, o framework JS de front-end mais popular usado para componentes de visualização frontend. Com o React MDL, você pode mesclar esses componentes do React com a biblioteca MDL para ter uma visão muito parecida com a documentação on-line do Google..

Aqui está um exemplo de modelo de artigo para que você possa ter uma ideia de como isso parece.

Esta página não possui muitos componentes React, mas demonstra a estética do design do material. Você encontrará muito mais ação nesta demonstração criada usando componentes React.

Você pode encontrar mais informações sobre o Material Design Lite no repositório do GitHub se estiver curioso para saber mais. A partir daí, você pode fazer o download do CSS e do JS brutos para implementar na sua página, que suporta automaticamente todos os navegadores modernos e uma degradação elegante.

Infelizmente, como o React MDL ainda é relativamente novo, ele não tem suporte total para todos os componentes.

Mas você pode ver uma lista completa aqui, incluindo pequenas demonstrações para cada uma. Isso também inclui pedaços de código-fonte que você pode copiar / colar em seus próprios projetos, conforme necessário.

Eu gostaria não recomendar a aprendizagem Reagir MDL até que você já se sinta confortável com ambas as bibliotecas.

O pacote Material Design Lite é bastante simples de iniciar, mas o React é muito mais complexo.

Para saber mais sobre o MDL, consulte a página de perguntas frequentes em seu site oficial. Ele oferece dicas sobre onde usar o MDL, quais recursos ele oferece e como ele pode se encaixar em um fluxo de trabalho típico do webdev.

Mas, sinceramente, mesmo que você não entenda Reagir muito bem, você ainda pode se dar bem com todas as amostras na página de componentes. Por exemplo, a página do campo de texto possui campos de texto de trabalho usando design de material, mas com trechos de código do React.

Sinta-se à vontade para brincar e ver o que você pode construir. Ambas as bibliotecas são completamente livres e de código aberto para todos os projetos, sejam eles pessoais ou comerciais..

Você pode descobrir mais na página do React MDL GitHub se quiser estudar a fonte e mergulhar.