Construir interfaces de aplica\u00e7\u00f5es pode ser desafiador. Para garantir que elas sejam utiliz\u00e1veis, acess\u00edveis e manuten\u00edveis, muitos aspectos precisam ser considerados. Uma dessas etapas \u00e9 a estiliza\u00e7\u00e3o de componentes front-end, que pode envolver a cria\u00e7\u00e3o de classes CSS usando pr\u00e9-processadores como SASS e LESS, e a aplica\u00e7\u00e3o dessas classes usando escopo local ou global, importando o(s) arquivo(s) nas p\u00e1ginas e\/ou componentes que as utilizam.<\/p>\n\n\n\n
Felizmente, hoje em dia contamos com uma variedade de ferramentas para tornar esse trabalho mais f\u00e1cil, r\u00e1pido e produtivo, com padroniza\u00e7\u00e3o e possibilidades de customiza\u00e7\u00e3o. Uma dessas ferramentas \u00e9 o Chakra UI.<\/p>\n\n\n\n
O Chakra UI \u00e9 uma biblioteca de componentes de interface de usu\u00e1rio para React que oferece uma experi\u00eancia de desenvolvimento r\u00e1pida e f\u00e1cil. Ele fornece um conjunto de componentes prontos para uso, bem como estilos e temas personaliz\u00e1veis, tornando-o uma escolha popular para desenvolvedores que procuram criar interfaces de usu\u00e1rio elegantes e acess\u00edveis. <\/p>\n\n\n\n
Se voc\u00ea j\u00e1 usou o Material UI antes, vai perceber uma semelhan\u00e7a. A diferen\u00e7a \u00e9 que o Material UI usa conceitos de Material Design. J\u00e1 o Chakra UI foi baseado na Theme UI, seguindo as especificidades dessa biblioteca, mas fornecendo mais componentes, uma melhor API de estilo e componentes mais intuitivos, com um foco maior na cria\u00e7\u00e3o de c\u00f3digo flex\u00edvel, combin\u00e1vel e escal\u00e1vel. Al\u00e9m disso, j\u00e1 conta com padr\u00f5es de acessibilidade.<\/p>\n\n\n\n
Ele oferece uma maneira muito r\u00e1pida de usar componentes pr\u00e9-constru\u00eddos, para que n\u00e3o precisemos cri\u00e1-los do zero. O Chakra UI ajuda muito na cria\u00e7\u00e3o de interfaces para React e pode acelerar o processo. Al\u00e9m disso, como j\u00e1 citamos, voc\u00ea tem a op\u00e7\u00e3o de personalizar praticamente qualquer coisa do tema Chakra padr\u00e3o para dar \u00e0 sua aplica\u00e7\u00e3o um toque pessoal.<\/p>\n\n\n\n
LEIA TAMB\u00c9M <\/p>
Confira novos conte\u00fados para pessoas desenvolvedoras <\/a><\/p><\/blockquote>\n\n\n\n
Ao utilizar ferramentas como o Chakra UI, podemos economizar tempo e nos concentrar no que realmente importa: a l\u00f3gica do aplicativo! <\/p>\n\n\n\n
Neste tutorial, apresentaremos um passo a passo para a instala\u00e7\u00e3o, configura\u00e7\u00e3o e utiliza\u00e7\u00e3o do Chakra UI e seus componentes em uma aplica\u00e7\u00e3o simples, mas com os fundamentos b\u00e1sicos para que voc\u00ea possa come\u00e7ar a se aventurar.<\/p>\n\n\n\n
Passo a passo<\/strong><\/h2>\n\n\n\n
Antes de come\u00e7ar, certifique-se de ter um projeto React existente configurado. Caso contr\u00e1rio, voc\u00ea pode criar um novo projeto com create-react-app. <\/p>\n\n\n\n
Voc\u00ea tamb\u00e9m poder\u00e1 acompanhar o tutorial atrav\u00e9s do c\u00f3digo-fonte deste exemplo<\/a>.<\/p>\n\n\n\n
Agora vamos para a parte divertida: o c\u00f3digo!<\/p>\n\n\n\n
Instala\u00e7\u00e3o do Chakra UI<\/strong><\/h3>\n\n\n\n
Para come\u00e7ar a utilizar o Chakra UI em seu projeto React, voc\u00ea precisa instalar a biblioteca atrav\u00e9s do gerenciador de pacotes do Node.js, o NPM (ou Yarn, se preferir), seguindo as instru\u00e7\u00f5es da documenta\u00e7\u00e3o oficial<\/a>. Para isso, abra o terminal no diret\u00f3rio do seu projeto e execute o seguinte comando:<\/p>\n\n\n\n
npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion<\/p>\n\n\n\n
ou<\/p>\n\n\n\n
yarn add @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion<\/p>\n\n\n\n
Este comando instalar\u00e1 as depend\u00eancias necess\u00e1rias do Chakra UI, incluindo o pacote principal @chakra-ui\/react, as bibliotecas de estiliza\u00e7\u00e3o @emotion\/react e @emotion\/styled e o pacote framer-motion para anima\u00e7\u00f5es.<\/p>\n\n\n\n
Configurando o Chakra UI Provider<\/strong><\/h3>\n\n\n\n
O Chakra UI usa um componente Provider para fornecer estilos e temas para toda a sua aplica\u00e7\u00e3o. Para configurar o Provider, voc\u00ea precisar\u00e1 import\u00e1-lo do pacote @chakra-ui\/react e us\u00e1-lo em torno do componente App em seu arquivo index.js ou App.js.<\/p>\n\n\n\n
Estamos utilizando um projeto gerado pelo create-react-app sem o template typescript. Seguindo o exemplo deste tutorial, voc\u00ea deve ir at\u00e9 o arquivo index.js e l\u00e1 adicionar o seu provider.<\/p>\n\n\n\n