Chakra oferece componentes simples com estilos limpos e utilizáveis.
Estilizar aplicativos com CSS personalizado é divertido até que o projeto cresça em complexidade. O desafio está em estilizar e manter um design consistente em toda a aplicação.
Embora você ainda possa usar CSS, geralmente é mais eficaz usar uma biblioteca de estilo de UI como Chakra UI. Esta biblioteca fornece uma maneira rápida e descomplicada de estilizar seus aplicativos usando componentes de UI e acessórios de utilitário predefinidos.
Introdução ao Chakra UI em aplicativos React
Para começar IU do Chacra, vá em frente e, crie um aplicativo React básico usando o create-react-app comando. Alternativamente, você pode use Vite para criar um projeto React.
Em seguida, instale estas dependências:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionVocê pode encontrar o código deste projeto em seu GitHub repositório.
Adicionar provedor de tema do Chakra
Depois de instalar essas dependências, você precisa encapsular o aplicativo com o
Provedor de Chakra. Você pode adicionar o provedor em seu index.jsx, principal.jsx, ou Aplicativo.jsx do seguinte modo:import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { ChakraProvider } from'@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
</ChakraProvider>
</React.StrictMode>,
)
Envolvendo o aplicativo com o Provedor de Chakra é necessário para acessar os componentes e propriedades de estilo do Chakra UI em todo o seu aplicativo.
Alternar temas diferentes
Chakra UI fornece um tema padrão pré-construído que inclui suporte para modos claro, escuro e cores do sistema. No entanto, você pode personalizar ainda mais os temas de UI do seu aplicativo e outras propriedades de estilo dentro de um objeto de tema, conforme especificado em Documentação do Chakra.
Para alternar os temas claros e escuros, crie um componentes/ThemeToggler.jsx arquivo no fonte diretório e inclua o seguinte código.
import React from'react'
import { useColorMode, Box, IconButton} from'@chakra-ui/react';
import { SunIcon, MoonIcon } from'@chakra-ui/icons'exportdefaultfunctionThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return ("center" py={4} > icon={colorMode 'light'? <MoonIcon />: <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
/>Toggle Theme</h2>
</Box>
);
}
Agora vá em frente e importe o pacote de ícones:
npm i @chakra-ui/iconsO ThemeToggler O componente renderizará um botão que permite aos usuários alternar entre temas claros e escuros no aplicativo.
Este componente acessa o modo de cor atual useColorMode gancho e usa o alternarColorMode função para alternar entre os modos.
O Botão de ícone O componente assume as características de um ícone e ao mesmo tempo possui os recursos clicáveis de um botão.
Crie uma IU de formulário de login
Crie um novo Login.jsx arquivo no componentes diretório e adicione o seguinte código a ele:
Primeiro, adicione essas importações.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Depois de importar esses componentes de UI, defina o componente funcional React e os principais componentes do contêiner que conterão todos os elementos da interface de usuário de login.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
O Caixa componente renderiza um divisão elemento - ele serve como o bloco de construção básico sobre o qual você constrói todos os outros componentes da UI do Chakra. Flexível, por outro lado, é um componente Box com sua propriedade display definida como flexionar. Isso significa que você pode usar as propriedades flexíveis para estilizar o componente.
Os componentes Center e Stack são componentes de layout, no entanto, apresentam pequenas diferenças em funcionalidade. O componente central é responsável por alinhar todos os componentes filhos em seu centro, enquanto Stack agrupa os elementos da UI e adiciona espaçamento entre eles.
Agora, vamos construir a seção de cabeçalho do formulário. O componente Header será muito útil para esta parte. Dentro do componente Stack, adicione este código.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> O VStack O componente empilha seus elementos filhos na direção vertical. A seguir, crie o componente do cartão que abrigará o formulário de login e seus elementos.
'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Vá em frente e atualize seu Aplicativo.jsx arquivo para importar o Login, bem como o componente ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Ótimo! Inicie o servidor de desenvolvimento para atualizar as alterações.
npm run devAgora, assim que a página for carregada no navegador, ela exibirá inicialmente o tema padrão do modo claro.
Agora, clique no Alternar tema botão de ícone para mudar o modo de tema.
Gerenciando o estado do formulário usando React Hooks
Neste ponto, o formulário de login contém apenas dois campos de entrada e um botão de login. Para torná-lo funcional, vamos começar implementando uma lógica de gerenciamento de estado usando ganchos React.
Defina os seguintes estados dentro do componente funcional Login.
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);A seguir, adicione o em mudança função manipuladora que ouvirá as alterações nos campos de entrada, capturará as entradas e atualizará os estados de e-mail e senha de acordo.
Adicione essas instruções de código aos campos de entrada.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Com essas alterações, você agora captura as entradas do usuário.
Implementando validação de formulário e tratamento de erros com recursos integrados do Chakra UI
Agora, adicione uma função manipuladora que processará as entradas e retornará os resultados apropriados. No forma tag de abertura do elemento, adicione o onSubmit função de manipulador da seguinte maneira.
A seguir, defina o identificadorSubmit função. Logo abaixo dos estados que você definiu, inclua o código a seguir.
const handleSubmit = async event => {
event.preventDefault();
setIsLoading(true);
try {
await userLogin({ email, password });
setSuccess('Logged in successfully!');
setIsLoading(false);
setIsLoggedIn(true);
} catch (error) {
setError('Invalid username or password!');
setIsLoading(false);
setEmail('');
setPassword('');
}
};
Este assíncrono identificadorSubmit A função será acionada quando alguém enviar o formulário. A função define o estado de carregamento como verdadeiro – simulando uma ação de processamento. Você pode renderizar o controle giratório de carregamento da UI do Chakra para fornecer uma dica visual ao usuário.
Além disso, a função handleSubmit chamará o login de usuário função que leva o e-mail e a senha como parâmetros para validá-los.
Simular uma solicitação de API de autenticação
Para verificar se as entradas fornecidas por um usuário são válidas, você pode simular uma chamada de API definindo o parâmetro login de usuário função que verificará as credenciais de login de maneira semelhante a uma API de back-end.
Logo abaixo da função handleSubmit, adicione este código:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Este código define uma função assíncrona que executa uma lógica de validação lógica simples.
Recursos da interface do usuário para tratamento de erros do Chakra.
Você pode fornecer feedback visual adequado aos usuários com base em suas interações no formulário usando os componentes de feedback do Chakra. Para fazer isso, comece importando esses componentes da biblioteca de UI do Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressAgora, adicione o seguinte código logo abaixo da tag de abertura do elemento de formulário.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Por fim, faça esta atualização no botão de envio para incluir o componente giratório de carregamento, CircularProgress.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Aqui está o que um usuário verá quando fizer login com sucesso:
Se houver um erro no processo de login, eles deverão ver uma resposta como esta:
Melhore seu processo de desenvolvimento com Chakra UI
Chakra UI fornece um conjunto de componentes de UI bem projetados e personalizáveis que você pode usar para construir rapidamente UIs de reação. Independentemente de quão simples ou complexos sejam seus designs, o Chakra possui componentes para quase todas as UI tarefas.
