Ir para o conteúdo PET Sistemas de Informação Ir para o menu PET Sistemas de Informação Ir para a busca no site PET Sistemas de Informação Ir para o rodapé PET Sistemas de Informação
  • Acessibilidade
  • Sítios da UFSM
  • Área restrita

Aviso de Conectividade Saber Mais

Início do conteúdo

Material UI – Framework React UI



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:

 

       

 

Segue um exemplo de um projeto com a Material UI:

 

Referências: 

 

https://mui.com/

https://blog.rocketseat.com.br/react-material-ui/

https://acervolima.com/as-5-principais-bibliotecas-de-iu-do-react-que-voce-deve-explorar-em-2021/

Divulgue este conteúdo:
https://ufsm.br/r-791-3307

Publicações Relacionadas

Publicações Recentes