Material Ui no React: O que é, e como funciona.
Tags: beginners, react, programming
Published: 2023-03-08 14:50:04

Material UI é uma biblioteca de componentes de interface de usuário (UI) para React. Desenvolvida com base no design do Material Design, criado pelo Google, ela fornece uma ampla variedade de componentes pré-construídos, como botões, caixas de diálogo, menus e muito mais, permitindo que desenvolvedores construam interfaces de usuário elegantes e responsivas com facilidade.

Um dos principais benefícios de usar o Material UI é a eficiência no desenvolvimento. Os desenvolvedores podem criar interfaces de usuário facilmente usando componentes pré-construídos e personalizá-los para atender às necessidades de seu projeto. Além disso, como os componentes do Material UI são altamente testados e atualizados regularmente, os desenvolvedores podem ter certeza de que estão usando um código confiável e seguro.

**Instalando o Material Ui -**

O Material UI pode ser instalado tanto via yarn como via npm, dos seguintes modos:

```
npm install @mui/material @emotion/react @emotion/styled
```

```
yarn add @mui/material @emotion/react @emotion/styled
```

Vale ressaltar que essa biblioteca trabalha em conjunto com Emotion, uma outra biblioteca de estilização, mas pode ser usada com Styled-Component também o instalando:

```
npm install @mui/material @mui/styled-engine-sc styled-components
```

```
yarn add @mui/material @mui/styled-engine-sc styled-components
```


**Material UI em ação -**


Não poderíamos continuar, sem antes um exemplo dessa biblioteca de estilização sendo utilizada. No caso a frente usaremos ela incrementado ao React:

```
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import Button from "@mui/material/Button";

function MyApp() {
  return <Button variant="contained">Hello World</Button>;
}

ReactDOM.createRoot(document.querySelector("#app")).render(
  <React.StrictMode>
    <MyApp />
  </React.StrictMode>
);
```

O resultado da criação do botão acima será:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1mhnqv4ajuq0uj4g52o.png)

**Responsividade no Material Ui -**

Material UI é uma biblioteca de componentes mobile-first—nós escrevemos código para dispositivos móveis primeiro, e depois escalamos os componentes conforme necessário usando consultas de mídia CSS.

Para garantir a renderização adequada e zoom de toque para todos os dispositivos, adicione a meta tag responsiva `viewport` ao seu elemento `<head>`:

```
<meta name="viewport" content="initial-scale=1, width=device-width" />
```

Outra vantagem do Material UI é a comunidade ativa de desenvolvedores e contribuidores que apoiam a biblioteca. A comunidade é ativa em fóruns de discussão e mídias sociais, respondendo a perguntas e fornecendo suporte a outros desenvolvedores.

A documentação do Material UI é outra vantagem, fornecendo aos desenvolvedores um guia detalhado para cada componente e como usá-lo. A documentação é completa e fácil de seguir, o que torna o desenvolvimento mais rápido e mais fácil.

Em resumo, o Material UI é uma excelente biblioteca para desenvolvedores React que desejam criar interfaces de usuário estilosas, eficientes e flexíveis. Com seus componentes pré-construídos, personalização fácil, comunidade ativa de desenvolvedores e documentação completa, o Material UI é uma ferramenta poderosa para tornar o processo de desenvolvimento mais rápido e fácil.