Antes de TailwindCSS ou Bootstrap surgiu, existia uma velha magia arcana que todos os desenvolvedores de CSS e front-end consultavam e usavam quando queriam criar realmente responsivo aplicativos: Consultas de mídia.
De dispositivos móveis a tablets e desktops e muito mais, os desenvolvedores de front-end sabiam que o domínio das Consultas de mídia era a chave para tornar suas obras de arte acessíveis a todo e qualquer usuário.
Nesta postagem do blog, você aprenderá como usar essa ferramenta incrível, agora definida como o pacote reativo-responsivo encontrado em NPM . Pule para dentro, jovem feiticeiro, é hora de você construir a pirâmide do conhecimento.
O que é reativo?
React-responsive é um pacote NPM que permite criar designs realmente responsivos em seus projetos React. Ele usa o poder combinado de consultas de mídia e pontos de interrupção para definir os elementos DOM que o desenvolvedor deseja mostrar e ocultar. É outra ferramenta poderosa em seu arsenal como desenvolvedor React.
Se você adora designs voltados para dispositivos móveis, designs responsivos ou se deseja que seu aplicativo seja dimensionado para cima e para baixo dependendo do tamanho da tela, mantendo sua integridade estrutural, a resposta reativa é o pacote para você.
Primeiros passos com resposta reativa
Primeiro, comece criando um novo projeto React sem dependências. Faremos a instalação npm do pacote de resposta reativa com npm i-S resposta reativa .
Só para você saber, a resposta reativa antecipa diferentes casos de uso, para que possamos usá-la com gancho ou com componentes. Em seguida, vá para seu app.js e importe o pacote com import {useMediaQuery} from'react-responsive'.
Definindo consultas de mídia
Na função app.js, vamos definir consultas de mídia como estas:
const isMobileDevice=useMediaQuery ({ consulta:"(min-device-width: 480px)", }); const isTabletDevice=useMediaQuery ({ consulta:"(min-device-width: 768px)", }); const isLaptop=useMediaQuery ({ consulta:"(min-device-width: 1024px)", }); const isDesktop=useMediaQuery ({ consulta:"(min-device-width: 1200px)", }); const isBigScreen=useMediaQuery ({ consulta:"(min-device-width: 1201px)", });
Aqui, estamos usando as consultas de mídia para fornecer conteúdo se o dispositivo tiver um tamanho específico. Falando nisso, a resposta reativa é tão incrível que podemos forçar o conteúdo a aderir a um tamanho com o suporte do dispositivo .
Tem chaves como orientação , scan , aspectRatio , deviceAspectRatio , height , etc e permitem simular um dispositivo para teste em ambientes que normalmente não permitiriam.
Agora, de volta ao nosso código.
Crie uma pasta em seu src e nomeie-a “componentes”. Lá, crie cinco novas pastas: big-screen, desktop, laptop, mobile, tablet-mobile .
Cada uma dessas pastas terá um arquivo component.jsx e um arquivo styles.css . Agora teremos longos blocos de código porque queremos construir a pirâmide, então prepare-se, jovem feiticeiro. Você está pronto? Tudo bem, vamos começar.
big-screen.component.jsx
import React from'react'
import'./big-screen.styles.css'
export const BigScreen=()=> { Retorna ( Opa! Estou no modo de tela grande.
Esta é a base da pirâmide
)
}
big-screen.styles.css
.big-screen { largura: 600px; altura: 100px; plano de fundo: # 7c52bf; margem: 0 automático;
}
.big-screen p { tampo acolchoado: 2%;
}
desktop.component.jsx
import React from'react'
import'./desktop.styles.css'
export const Desktop=()=> { Retorna ( Opa! Estou no modo desktop.
Mas se você vir alguma coisa abaixo de mim, agora estou no modo laptop
)
}
desktop.styles.css
.desktop { largura: 400px; altura: 100px; plano de fundo: # b097d8; margem: 0 automático;
}
.desktop p { tampo acolchoado: 2%;
}
laptop.component.jsx
import React from'react'
import'./laptop.styles.css'
export const Laptop=()=> { Retorna ( Opa! Estou no modo laptop.
Mas se você vir alguma coisa abaixo de mim, agora estou no modo de tela grande
)
}
laptop.styles.css
.laptop { largura: 500px; altura: 100px; plano de fundo: # 9674cb; margem: 0 automático; } .laptop p { tampo acolchoado: 2%;
}
tablet-mobile.component.jsx
import React from"react";
import"./tablet-mobile.styles.css";
export const TabletMobile=()=> { Retorna ( Opa! Estou no modo tablet móvel.
Mas se você vir algo abaixo de mim, agora estou no modo Desktop
);
};
tablet-mobile.styles.css
.tablet-mobile { largura: 300px; altura: 100px; plano de fundo: # cab9e5; margem: 0 automático;
}
.tablet-mobile p { tampo acolchoado: 2%;
}
mobile.component.jsx
import React from'react'
import'./mobile.styles.css'
export const Mobile=()=> { Retorna ( {/* Ops! Estou no modo móvel.
*/} )
}
mobile.styles.css
.mobile { largura: 80px; altura: 80px; margem: 0% automático; raio da borda: 50%; 8 sombra da caixa: 15px 15px 0 0 # e4dcf2;
}
Uau! Isso era muito código! Mas não se preocupe, jovem mago, isso é facilmente compreendido. Tudo o que fizemos nos arquivos acima foi criar um componente diferente para um tamanho de tela diferente, de modo que quando você entrar em uma nova resolução de tela, um novo nível para a nossa pirâmide apareça.
Se você precisa ver como isso funciona, pode verificar meu GitHub repo e versão ativa do aplicativo .
Agora, vamos voltar ao app.js. Na declaração de retorno, coloque isso em:
React Responsive-um guia
{isMobileDevice &&} {isTabletDevice && <> {isDesktop && } {isLaptop && } {isBigScreen && } }
Aqui, estamos usando as declarações verdadeiras de React para definir o tamanho da janela de visualização e o conteúdo. Além de lidar com os pontos de interrupção dos métodos definidos no app.js, também podemos fazer isso por meio de componentes.
Nesse caso, você importará o componente MediaQuery com import MediaQuery from react-responsove e o usará em componentes como este:
Manipule-me com os poderes do React Responsive
Teste de resposta reativa em seu aplicativo
Parabéns por chegar ao final desta lição! Agora, tudo o que precisamos fazer é testar o aplicativo que acabamos de criar juntos.
Para fazer isso, abra a janela de ferramentas de desenvolvimento do seu navegador e defina a janela de visualização como responsiva . Em seguida, crie a forma de pirâmide ajustando-a do menor tamanho ao maior.
Estou feliz por termos feito isso acontecer juntos, jovem feiticeiro. Agora, com a pirâmide da verdade revelada a você, vá em frente e conquiste o seu mundo. Mal posso esperar para ver os aplicativos incríveis que você criará com esse novo conhecimento. Até a próxima vez.
A postagem Uso de resposta reativa para implementar design responsivo apareceu primeiro no LogRocket Blog .
