Quando criamos uma aplicação seja mobile ou web, pensamos no que será necessário inserir,que linguagem usar, consumo de APIs, estilização entre outras coisas. Infelizmente, muitas alternativas visuais que gostaríamos de utilizar podem acabar deixando nossso sistema com requisições em excesso e o tornando lento. Seria muito bom existir uma biblioteca que visa construção de interfaces para o usuário e que a fluidez é primordial. Pensando nisso um time de desenvolvedores criou o Chakra Ui. Veremos o que é e como ele é executada.

O Chakra UI é uma biblioteca baseada em componentes. Ele é composto de blocos de construção básicos que podem ajudá-lo a criar o front-end de seu aplicativo da web.

Já passou mais tempo do que necessário tendo que se importar em como centralizar um elemento <div> ou tentar inserir um botão num lugar exato da tela,o fazendo "esquecer" da parte lógica e de construção (Back-end) do sistema? Isso acontece com todos, por essa razão o Chakra Ui é uma excelente ferramenta, pois além de reutilizável, tem módulos preparados para uso na hora. Acredito que já tenha compreendido a idéia de Chakra na teoria, nós ainda veremos um exemplo real de uso dessa biblioteca, mas antes, vamos intalá-la:

Instalando Chakra-UI

Dentro de um diretório vamos o instalar via npm:

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

(Pode ter percebido que na instalação, aparece o Emotio e o Framer-motion: responsáveis por gerênciamento e animações do Chakra, eles trabalham juntos.)

Temos também uma solução de instalação para yarn:

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Ao iniciar o Chakra, nós precisamos inserir o Chakra-Provider:

import React from "react"

// 1. import de `ChakraProvider` componente
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
 // 2.return no app
 return (
   <ChakraProvider>
     <Component />
   </ChakraProvider>
 )
}

Abaixo conseguimos ver um exemplo de uso de botões usando Chakra:

import { Button } from "@chakra-ui/react";

function App() {
  return (
    <div>
      <Button colorScheme="blue">Clique aqui</Button>
    </div>
  );
}

export default App;

No exemplo anterior, o botão pode ser customizado e tinha coloração azul.

O Chakra UI possui muitos outros componentes que podem ser usados da mesma forma. Alguns exemplos incluem:

Componentes do CHAKRA-UI:

• Box: um componente de caixa flexível e responsivo
• Text: um componente de texto com vários estilos
• Input: um componente de entrada de dados
• Select: um componente de seleção de opções
• Checkbox: um componente de seleção de caixa de seleção
• Radio: um componente de seleção de botão de opção
• Slider: um componente de controle deslizante

Todos esses componentes citados podem ser usados para criar um ambiente estilizado agradável .Por exemplo, para margin-topCSS, você escreveria como <Text mt={8} >. Isso definirá uma margem superior 8px no elemento selecionado. Sua estilização de cores lembra o TailWindCss, caso você tenha familiaridade com essa biblioteca, será de grande ajuda no entendimento.

Responsividade via CHAKRA-UI:

Quando trabalhamos com diversas interfaces, de diferentes telas e pra diferentes locais:seja mobile ou web, nos deparamos sempre com o problema chato da falta de responsividade entre os ambientes. O que pode dar certo em uma tela de celular, pode dar MUITO errado em uma tela de computador. Felizmente o Chakra consegue fazer isso, por exemplo:

import { Box } from "@chakra-ui/react";

function App() {
  return (
    <Box display={{ base: "none", md: "block" }}>
      <p>Este parágrafo só é exibido em telas médias ou maiores</p>
    </Box>
  );
}

Como é dito, o código acima só consegue exibir a escrita em determinados tipos de tela. Claro, aqui foi deixado a uma estatística feita pelo próprio sistema, mas é possível definir mexendo diretamente no tamanho:

import { Box } from "@chakra-ui/react";

function MyComponent() {
  return (
    <Box
      bg="blue.500"
      color="white"
      p={4}
      width={{ base: "100%", md: "50%", lg: "25%" }}
    >
      Este componente tem uma largura de 100% em telas pequenas, 50% em telas médias e 25% em telas grandes.
    </Box>
  );
}

E para que não seja apenas diversos exemplos de códigos mas nenhuma imagem real do uso deste, que tal ver um exemplo feito em chakra por imagem?

import * as React from "react";
import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";

export default function Example() {
  return (
    <Center h="100vh">
      <Box p="5" maxW="320px" borderWidth="1px">
        <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
        <Flex align="baseline" mt={2}>
          <Badge colorScheme="pink">Plus</Badge>
          <Text
            ml={2}
            textTransform="uppercase"
            fontSize="sm"
            fontWeight="bold"
            color="pink.800"
          >
            Verified &bull; Cape Town
          </Text>
        </Flex>
        <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
          Modern, Chic Penthouse with Mountain, City & Sea Views
        </Text>
        <Text mt={2}>$119/night</Text>
        <Flex mt={2} align="center">
          <Box as={MdStar} color="orange.400" />
          <Text ml={1} fontSize="sm">
            <b>4.84</b> (190)
          </Text>
        </Flex>
      </Box>
    </Center>
  );
}

O código acima consegue criar a seguinte imagem abaixo:

O Chakra UI foi criado para impulsionar o processo de desenvolvimento para outro nível. É muito flexível, a documentação é ótima e há muitos modelos pré-construídos para ajudá-lo a acelerar o processo de criação de sua interface.

Obrigado por ler até aqui!!!!