Chakra te ofrece componentes simples con estilos limpios y utilizables.
Diseñar aplicaciones con CSS personalizado es divertido hasta que el proyecto crece en complejidad. El desafío radica en diseñar y mantener un diseño consistente en toda la aplicación.
Si bien aún puedes usar CSS, a menudo es más efectivo usar una biblioteca de estilo de interfaz de usuario como Chakra UI. Esta biblioteca proporciona una forma rápida y sencilla de diseñar sus aplicaciones utilizando componentes de interfaz de usuario predefinidos y accesorios de utilidad.
Comenzando con la interfaz de usuario de Chakra en aplicaciones React
Para empezar Interfaz de usuario de chakras, siga adelante y, estructurar una aplicación React básica usando create-react-app dominio. Alternativamente, puedes use Vite para crear un proyecto de React.
A continuación, instale estas dependencias:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionPuedes encontrar el código de este proyecto en su GitHub repositorio.
Agregar el proveedor de temas de Chakra
Después de haber instalado estas dependencias, debe empaquetar la aplicación con el Proveedor de chakras. Puede agregar el proveedor ya sea en su index.jsx, principal.jsx, o aplicación.jsx como sigue:
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>,
)
Envolver la aplicación con el Proveedor de chakras es necesario para acceder a los componentes y propiedades de estilo de Chakra UI en toda su aplicación.
Alternar diferentes temas
La interfaz de usuario de Chakra proporciona un tema prediseñado predeterminado que incluye compatibilidad con los modos de color claro, oscuro y del sistema. Sin embargo, puede personalizar aún más los temas de la interfaz de usuario de su aplicación y otras propiedades de estilo dentro de un objeto de tema como se especifica en Documentación de chakra.
Para alternar los temas oscuro y claro, cree un componentes/ThemeToggler.jsx archivo en el src directorio e incluya el siguiente 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>
);
}
Ahora, continúa e importa el paquete de iconos:
npm i @chakra-ui/iconsEl Alternador de temas El componente mostrará un botón que permitirá a los usuarios cambiar entre temas claros y oscuros en la aplicación.
Este componente accede al modo de color actual utilizarColorMode gancho y utiliza el alternar modo de color función para cambiar entre modos.
El IconoBotón El componente adquiere las características de un icono y al mismo tiempo tiene la capacidad de hacer clic de un botón.
Crear una interfaz de usuario de formulario de inicio de sesión
Crear un nuevo Iniciar sesión.jsx archivo en el componentes directorio y agregue el siguiente código:
Primero, agregue estas importaciones.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Después de importar estos componentes de la interfaz de usuario, defina el componente funcional de React y los componentes del contenedor principal que contendrán todos los elementos para la interfaz de usuario de inicio de sesión.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
El Caja componente representa un div elemento: sirve como bloque de construcción base sobre el cual se construyen todos los demás componentes de la interfaz de usuario de Chakra. Doblar, por otro lado, es un componente Box con su propiedad de visualización establecida en doblar. Esto significa que puede usar las propiedades flexibles para diseñar el componente.
Tanto los componentes Center como Stack son componentes de diseño; sin embargo, tienen ligeras diferencias en funcionalidad. El componente central es responsable de alinear todos los componentes secundarios en su centro, mientras que Stack agrupa los elementos de la interfaz de usuario y agrega espacio entre ellos.
Ahora, creemos la sección de encabezado del formulario. El componente Encabezado será realmente útil para esta parte. Dentro del componente Stack, agregue este código.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> El VStack El componente apila sus elementos secundarios en dirección vertical. A continuación, cree el componente de tarjeta que albergará el formulario de inicio de sesión y sus 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>
Continúe y actualice su aplicación.jsx para importar el inicio de sesión, así como el componente ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
¡Excelente! Inicie el servidor de desarrollo para actualizar los cambios.
npm run devAhora, una vez que la página se carga en el navegador, inicialmente mostrará el tema del modo claro predeterminado.
Ahora, haga clic en el Alternar tema Botón de icono para cambiar el modo de tema.
Administrar el estado del formulario usando React Hooks
En este punto, el formulario de inicio de sesión solo contiene dos campos de entrada y un botón de inicio de sesión. Para hacerlo funcional, comencemos implementando la lógica de gestión estatal. usando ganchos de reacción.
Defina los siguientes estados dentro del componente funcional Iniciar sesión.
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 continuación, agregue el en cambio Función de controlador que escuchará los cambios en los campos de entrada, capturará las entradas y actualizará los estados de correo electrónico y contraseña en consecuencia.
Agregue estas declaraciones de código a los campos de entrada.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Con estos cambios, ahora captura las entradas de los usuarios.
Implementación de validación de formularios y manejo de errores con las funciones integradas de la interfaz de usuario de Chakra
Ahora, agregue una función de controlador que procesará las entradas y devolverá los resultados apropiados. Sobre el forma etiqueta de apertura del elemento, agregue la enEnviar función del controlador de la siguiente manera.
A continuación, defina el manejarEnviar función. Justo debajo de los estados que ha definido, incluya el siguiente código.
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 asincrónico manejarEnviar La función se activará cuando alguien envíe el formulario. La función establece el estado de carga en verdadero, simulando una acción de procesamiento. Puede representar el control giratorio de carga de la interfaz de usuario de Chakra para proporcionar una señal visual al usuario.
Además, la función handleSubmit llamará al inicio de sesión de usuario función que toma el correo electrónico y la contraseña como parámetros para validarlos.
Simular una solicitud de API de autenticación
Para verificar que las entradas proporcionadas por un usuario sean válidas, puede simular una llamada API definiendo el inicio de sesión de usuario función que verificará las credenciales de inicio de sesión de manera similar a como lo haría una API de backend.
Justo debajo de la función handleSubmit, agregue 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 una función asincrónica que realiza una lógica de validación lógica simple.
Error de Chakra al manejar las funciones de la interfaz de usuario.
Puede proporcionar comentarios visuales adecuados a los usuarios en función de sus interacciones en el formulario utilizando los componentes de comentarios de Chakra. Para hacer eso, comience importando estos componentes desde la biblioteca de interfaz de usuario de Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressAhora, agregue el siguiente código justo debajo de la etiqueta de apertura del elemento del formulario.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Finalmente, realice esta actualización en el botón de enviar para incluir el componente giratorio de carga, CircularProgress.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Esto es lo que verá un usuario una vez que inicie sesión correctamente:
Si hay un error en el proceso de inicio de sesión, deberían ver una respuesta como esta:
Mejore su proceso de desarrollo con la interfaz de usuario de Chakra
Chakra UI proporciona un conjunto de componentes de UI bien diseñados y personalizables que puede utilizar para crear rápidamente Reaccionar UI. Independientemente de cuán simples o complejos sean sus diseños, Chakra tiene componentes para casi todas las UI. tareas.