Integração do Material UI com ReactJS

Explorando um pouco do Material UI no ReactJS com um app semelhante ao WhatsApp Web

Integração do Material UI com ReactJS

Algo que acontece com muitos Devs é não ter alguma aptidão ou mesmo não ter tempo hábil para fazer os Designs e Layouts de suas aplicações, mas quem não gosta de um front-end bonitinho?

Para ajudar a todos, existem muitas bibliotecas com padrões de Design e Layout bem definidos, e é sobre uma delas que falaremos hoje, o Material UI.

Não falaremos do Material UI em si, mas sim da junção dele com o nosso queridíssimo ReactJS criando uma interface semelhante ao do WhatsApp Web. Então pegue o seu guarda-chuva pois virá uma chuva de códigos abaixo.

/!\ WARNING /!\

Se você não conhece o JavaScript ou suas novas features com o ES6+ veja nossos cursos gratuitos starter: javascriptES6+!!

Configurando o ambiente

Vamos começar criando um App React com o CLI do create-react-app, que já configura o webpack, eslint e outras cozitas a mais.

create-react-app material-app

Depois no diretório do seu projeto vamos instalar o Material UI:

npm install @material-ui/core

Caso queiramos adicionar os componentes ícones:

npm install @material-ui/icons

E também, no arquivo public/index.html adicionaremos os links das fonts Roboto e Fonts Icon:

Isso já é o suficiente para você utilizar o ReactJS com o Material UI. Logicamente não vou deixar você brincar sozinho com isso, então bora fazer alguma coisa!!!

Configuração inicial

Resultado do App com ReactJS e Material UI

Vamos, a princípio, limpar alguns arquivos que não nos interessam e ajustar o que é preciso. Então vamos deixar apenas os arquivos:

// No src ficará apenas
src/App.js
src/index.js
src/index.css

Uma pequena limpeza no index.js:

Uma enxugada no index.html:

E por fim, um fundo acinzentado no body, no index.css:

Pronto!! Agora vamos sem medo fazer nosso App.

Aplicação

Para ficar mais fácil, aqui quebrei em diversas partes o nosso código para ir comentando.

A função withStyles servirá para injetamos um CSS customizado dentro do nosso componente principal e com ela podemos pegar informações do Material UI e assim criar algumas classes CSS que serão necessárias.

Como importamos o Fonts Icon, é através do @material-ui/icons que pegamos os ícones que queremos. E pelo @material-ui/core importamos os componentes já estilizados e padronizados do Material UI. Você pode olhar todos os componente aqui.

Para montarmos nosso estilo utilizaremos uma Arrow Function que retorna um objeto (as nossas classes).

Como podemos ver, no código abaixo utilizamos o componente Grid, um sistema de colunas que vai de 1 a 12 representando a porcentagem de uma div. Isso acontece dentro de uma div container, e as colunas são “itens” desse container.

Por isso, passamos a propriedade container na nossa primeira Grid e a Grid filha com a propriedade item para ser uma coluna. Nada impede de uma Grid item ter outra container.

Observe a propriedade xs, ela indica que em telas muito pequenas aquela Grid será representada com 12 colunas ou seja 100% de width. Isso acontece por que as Grids são responsivas.

Existem outras propriedades como xs, sm, md, lg, e xl, assim você pode configurar para que em telas grandes seja representada por 6 colunas e nas pequenas 12 por exemplo. Para saber mais.

Card

Nosso componente principal será um grande Card que forçamos ter o tamanho da nossa tela subtraindo os paddings de 50px do topo e rodapé. Nele dividiremos em duas colunas que separamos em dois componentes stateless o LeftContainer e RightContainer.

Começamos com a Grid que representa a porcentagem de 3 colunas do nosso Grid container. Os demais componentes são todos do Material UI que possuem várias propriedades. Adicionei algumas classes para deixar a parada bacana.

Aqui definimos uma Grid maior com a porcentagem de 9 colunas. Repara que juntando com o LeftContainer temos 100% da Grid pai preenchida. E como anteriormente todos os demais componentes do Material UI e é só dar aquele bisu no site deles para esclarecer alguma propriedade.

Por fim, vamos exportar o nosso App. Perceba que usamos o withStyles passando como argumento o nosso styles, ela nos retorna uma outra função que injeta a propriedade classes que usamos dentro do nosso App.

Conclusão

É nítido que não há limites com o que você pode fazer com o Material UI em pouco tempo e com pouco trabalho!!!

O que eu fiz foi apenas uma demonstração. E que tal você fazer algo e mostrar para gente!??

Código completo no github: https://github.com/Rocketseat/blog-react-material-ui

Não esquece de deixar seu comentário dizendo o que achou e compartilhar com seus amigos. ;P

 

AdonisJS + ReactJS + React Native
A seguir:

Instalando o Mapbox e listando imóveis no React Native

Instalando o Mapbox e listando imóveis no React Native