{"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
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Material UI – Framework React UI<\/span><\/strong><\/span>
<\/span>Uma breve introdu\u00e7\u00e3o<\/span><\/h1>

\u00a0<\/b><\/p>

<\/span><\/span><\/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>


<\/span>NPM:<\/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>

<\/span><\/span> \u00a0 \u00a0 <\/span><\/span><\/span> \u00a0 \u00a0 <\/span><\/span><\/span><\/p>

\u00a0<\/b><\/p>

Segue um exemplo de um projeto com a Material UI:<\/span><\/p>

\u00a0<\/b><\/p>

<\/span><\/span><\/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>

http:\/\/acervolima.com\/as-5-principais-bibliotecas-de-iu-do-react-que-voce-deve-explorar-em-2021\/<\/span><\/a><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Material UI – Framework React UIUma breve introdu\u00e7\u00e3o \u00a0 Imagem: Logo Material UI \u00a0 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 […]<\/p>\n","protected":false},"author":5643,"featured_media":3308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[203,149,192],"class_list":["post-3307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-frameworks","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/5643"}],"replies":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3307"}],"version-history":[{"count":0,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3307\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3308"}],"wp:attachment":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3307"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3307"}],"curies":[{"name":"wp","href":"http:\/\/api.w.org\/{rel}","templated":true}]}}