Material UI – Framework React UI
Uma breve introdução

Imagem: Logo Material UI

Olá pessoal, como estão? O PET-SI preparou mais uma redação para você, desta vez abordando um tema sobre uma biblioteca gráfica voltada para o framework React. Portanto, o objetivo desta redação é mostrar exemplos de interfaces e o porquê de se utilizar a Material UI.

O React é amplamente utilizado em todos os domínios. Bibliotecas e frameworks React UI são introduzidos, para que novos recursos possam ser fornecidos aos desenvolvedores. Devido a essas bibliotecas e estruturas, o desenvolvimento se tornou mais flexível e mais criativo

A Material UI é uma biblioteca de componentes React de código aberto que implementa o design do Google.

Ele inclui uma coleção abrangente de componentes pré-construídos que estão prontos para uso na produção imediata.

Basicamente a sua forma de uso baseia-se em utilização de componentes autossuficientes, não dependendo assim de uma folha de estilo global como o normalize.css. Portanto, ela é fácil de aprendizado e possui uma ótima colaboração entre equipes, trazendo uma experiência intuitiva para o desenvolvedor, rompendo a barreira de entrada para desenvolvedores back-end e designers menos técnicos. A priori, seu kit de design simples facilita o fluxo de trabalho e aumenta a consistência entre designers e desenvolvedores.

Para criarmos um projeto e instalar a Material UI é muito simples, basta seguir esses passos:

Começaremos criando um App React com a CLI do create-react-app, onde é feito a configuração do webpack entre outras.

create-react-app material-app

Após isso, no diretório, abra o terminal e instale a Material UI em seu projeto:

NPM:

npm install @material-ui/core

YARN:

yarn add @material-ui/core

E pronto, seu projeto já está preparado para utilizar a Material UI. A partir daí, utilize seus conhecimentos em React, busque temas, inspirações e componentes disponíveis dentro da documentação. Outrossim, ela é completamente personalizável, podendo modificar todos os aspectos do design do seu projeto, atendendo assim às necessidades específicas do seu negócio ou marca. A Material UI é muito rápida, por isso nunca se torna um problema a ser resolvido ao otimizar o desempenho de seu aplicativo ou site. Trabalhe com todos os objetos de tema: a biblioteca Material UI é compatível, o que gera menos erros, e também funciona com as soluções CSS-in-JS.

A melhores equipes de produtos do mundo confiam na MUI, segue exemplos: