{"id":3307,"date":"2022-08-14T17:31:03","date_gmt":"2022-08-14T20:31:03","guid":{"rendered":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/?p=3307"},"modified":"2025-09-02T14:34:12","modified_gmt":"2025-09-02T17:34:12","slug":"material-ui-framework-react-ui","status":"publish","type":"post","link":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/2022\/08\/14\/material-ui-framework-react-ui","title":{"rendered":"Material UI – Framework React UI"},"content":{"rendered":"\t\t
\u00a0<\/b><\/p>
Imagem: Logo Material UI<\/span><\/p> \u00a0<\/b><\/p> Ol\u00e1 pessoal, como est\u00e3o? O PET-SI preparou mais uma reda\u00e7\u00e3o para voc\u00ea, desta vez abordando um tema sobre uma biblioteca gr\u00e1fica voltada para o framework React. Portanto, o objetivo desta reda\u00e7\u00e3o \u00e9 mostrar exemplos de interfaces e o porqu\u00ea de se utilizar a Material UI.<\/span><\/p> \u00a0<\/b><\/p> O React \u00e9 amplamente utilizado em todos os dom\u00ednios. Bibliotecas e frameworks React UI s\u00e3o introduzidos, para que novos recursos possam ser fornecidos aos desenvolvedores. Devido a essas bibliotecas e estruturas, o desenvolvimento se tornou mais flex\u00edvel e mais criativo<\/span><\/p> \u00a0<\/b><\/p> A Material UI \u00e9 uma biblioteca de componentes <\/span>React <\/span>de c\u00f3digo aberto que implementa o design<\/a><\/span> do Google.<\/span><\/p> \u00a0<\/b><\/p> Ele inclui uma cole\u00e7\u00e3o abrangente de componentes pr\u00e9-constru\u00eddos que est\u00e3o prontos para uso na produ\u00e7\u00e3o imediata.<\/span><\/p> \u00a0<\/b><\/p> Basicamente a sua forma de uso baseia-se em utiliza\u00e7\u00e3o de componentes <\/span>autossuficientes<\/span>, n\u00e3o dependendo assim de uma folha de estilo global como o normalize.css. Portanto, ela \u00e9 f\u00e1cil de aprendizado e possui uma \u00f3tima colabora\u00e7\u00e3o entre equipes, trazendo uma experi\u00eancia intuitiva para o desenvolvedor, rompendo a barreira de entrada para desenvolvedores back-end e designers menos t\u00e9cnicos. A priori, seu kit de design simples facilita o fluxo de trabalho e aumenta a consist\u00eancia entre designers e desenvolvedores.<\/span><\/p> \u00a0<\/b><\/p> Para criarmos um projeto e instalar a Material UI \u00e9 muito simples, basta seguir esses passos:<\/span><\/p> \u00a0<\/b><\/p> Come\u00e7aremos criando um App React com a CLI do create-react-app, onde \u00e9 feito a configura\u00e7\u00e3o do webpack entre outras.<\/span><\/p> \u00a0<\/b><\/p> create-react-app material-app<\/span><\/p> \u00a0<\/b><\/p> Ap\u00f3s isso, no diret\u00f3rio, abra o terminal e instale a Material UI em seu projeto:<\/span><\/p> npm install @material-ui\/core<\/span><\/p> \u00a0<\/b><\/p> YARN:<\/span><\/p> yarn add @material-ui\/core<\/span><\/p> \u00a0<\/b><\/p> E pronto, seu projeto j\u00e1 est\u00e1 preparado para utilizar a Material UI. A partir da\u00ed, utilize seus conhecimentos em React, busque temas, inspira\u00e7\u00f5es e componentes dispon\u00edveis dentro da documenta\u00e7\u00e3o. Outrossim, ela \u00e9 completamente personaliz\u00e1vel, podendo modificar todos os aspectos do design do seu projeto, atendendo assim \u00e0s necessidades espec\u00edficas do seu neg\u00f3cio ou marca. A Material UI\u00a0<\/span>\u00e9 muito r\u00e1pida, 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 <\/span>biblioteca Material UI<\/span> \u00e9 compat\u00edvel, o que gera menos erros, e tamb\u00e9m funciona com as solu\u00e7\u00f5es CSS-in-JS.<\/span><\/p> \u00a0<\/b><\/p> A melhores equipes de produtos do mundo confiam na MUI, segue exemplos:<\/span><\/p> \u00a0<\/b><\/p> \u00a0<\/b><\/p> Segue um exemplo de um projeto com a Material UI:<\/span><\/p> \u00a0<\/b><\/p> Refer\u00eancias:\u00a0<\/span><\/p> \u00a0<\/b><\/p> http:\/\/mui.com\/<\/span><\/a><\/p> http:\/\/blog.rocketseat.com.br\/react-material-ui\/<\/span><\/a><\/p><\/span><\/span><\/p>
<\/span>NPM:<\/span><\/p><\/span><\/span> \u00a0 \u00a0 <\/span>
<\/span><\/span> \u00a0 \u00a0 <\/span>
<\/span><\/span><\/p>
<\/span><\/span><\/p>